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

作者：肥晨

2023-04-16
江苏
本文字数：1123 字
阅读完需：约 4 分钟

不定宽高水平垂直居中？

面试题回答方式：

通过 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;
}

复制代码

为什么 margin: 0 auto 会让 div 居中

margin 可以有 4 个值，分别对应影响的方向是上，右，下，左， 2 个值的时候，对应第一个值是控制上下距离，第二个值是控制左右，所以 magrgin：0 auto，就是上下距离为 0，auto 是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。

注意：

要给居中元素一个宽度，否则无效

该元素不可以浮动，否则无效

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/5486c8c03951321849d0e7d26】。文章转载请联系作者。

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者领域：前端公众号：农民工前端

发布

暂无评论

创作场景

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

不定宽高水平垂直居中？

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

如何居中 div

水平居中方法 1

水平居中方法 2

让绝对定位的 div 居中

水平垂直居中方法 1

水平垂直居中方法 2

水平垂直居中方法 3

为什么 margin: 0 auto 会让 div 居中

注意：

肥晨

评论