css水平垂直居中各种方法实现方式

原创

农民工前端 2023-02-25 10:02:29 博主文章分类：css ©著作权

文章标签 css css3 html 水平垂直居中宽高 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者农民工前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

不定宽高水平垂直居中？

面试题回答方式：

通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中
也可以父display：flex；，子设置一个margin：auto；
通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50% 通过transform：translate(-50%，-50%)拉回自身的宽和高的一半。
通过给父元素设置display：table-cell; vertical-align：middle text-align：center 给子元素设置vertical-align：middle text-align：center。就可以让子元素不定宽高水平垂直居中了。

文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠
水平方向：letter-spacing。设置为负值即可实现重叠。

如何居中div

具体实现方式：

水平居中方法1

给 div 设置一个宽度，然后添加 margin:0 auto; 属性

div{

  width: 200px;

  margin: 0 auto;

}

水平居中方法2

利用 text-align:center 实现

.container{

  background: rgba(0, 0, 0, .5);

  text-align: center:

  font-size: 0;

}

.box{

  display: inline-block;

  width: 500px;

  height: 400px;

  background-color: pink;

}

让绝对定位的div居中

div{

  positionn: absolute;

  width: 300px;

  height: 300px;

  margin: auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  background-color: pink; /* 方便看效果 */

}

水平垂直居中方法1

/* 确定容器的宽高，宽500高300 */

div{

  position: absolute;

  width:500px;

  height: 300px;

  top: 50%;

  left: 50%;

  margin: -150px 0 0 -250px;

  background-color: pink;

}

水平垂直居中方法2

/* 未知容器宽高，利用 transform 属性 */

div{

  position: absolute;

  width: 500px;

  height: 300px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: pink;

}

水平垂直居中方法3

/* 利用 flex 布局实际使用时应考虑兼容性 */

.container{

  display: flex;

  align-items: center; /* 垂直居中 */

  justify-content: center; /* 水平居中 */

}

.container div{

  width: 100px;

  height: 100px;

  background-color: pink;

}