【第1期】聊聊css居中那点事

yezi

2019-06-30

关注关注

前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。

我们主要从这几个方面来了解下居中：

水平居中
垂直居中
水平垂直居中

水平居中

水平居中又分为：

文字水平居中
图片水平居中
已知元素宽度的水平居中
未知元素宽度的水平居中

文字水平居中

实现文字的水平居中，是最为简单的了，加上text-align: center;即可，看以下代码：

<p class="text-center">
  文字水平居中
</p>

.text-center {
  text-align: center;
}

注意：父元素必须是块级元素，即display: block;至于什么是块级元素，不在本文讨论的范围

图片水平居中

图片水平居中跟文字一样，也是使用text-align: center;

非图片文本元素，已知宽度的水平居中

方法一：margin: 0 auto;

比如div元素，假设我们已经知道它的宽度是300px,这时候我们就可以这样设置,加上margin: 0 auto;这句代码。

<div class="div1">
  我是水平居中的div
</div>

.div1 {
  width: 300px;
  margin: 0 auto;
}

同样是针对块级元素才有效果。

方法二：绝对定位+负边距

<div class="parent3">
  <div class="child3"></div>
</div>

.parent3 {
  position: relative;
}

.child3 {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: -150px;  // 宽度的一半
}

非图片文本元素，未知宽度的水平居中

方法一：使用text-align: center + inline-block

我觉得比较简单的方法就是给父元素设置text-align: center;给子元素添加display: inline-block;这样就行了，还是来看代码比较直接。

<div class="parent">
  <div class="child">未知元素宽度</div>
</div>

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  padding: 20px;
  background: red;
}

方法二：使用绝对定位 + transform: translate()

父元素设置相对定位position: relative;;子元素设置绝对定位position: absolute加transform。看以下例子：

<div class="parent">
  <div class="child">我是水平居中的div</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 20px;
  background: red;
}

注意：为了更好的兼容性，transform需要加上不同浏览器的前缀。

方法三：使用浮动

还是来看具体的代码：

<div class="parent2">
  <div class="child2">我是水平居中的div</div>
</div>

.parent2 {
  position: relative;
  float: left;
  left: 50%;
}

.child2 {
  position: relative;
  right: 50%;
  padding: 20px;
  background: red;
}

方法四：flex实现水平居中

<div class="parent4">
  <div class="child4">我是水平居中的div</div>
</div>

.parent4 {
  position: relative;
  display: flex;
  justify-content: center;
}

.child4 {
  padding: 20px;
  background: red;
}

注意：flex有兼容性问题，关于flex的兼容性写法，大家可以自行百度下，也可以在caniuse查看浏览器的兼容情况

方法五：fit-content属性

“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果。这个方法也是我第一次用到，后期有时间再来仔细研究学习下。

来看代码：

<div class="fitContentDiv">
  我是水平居中的div
</div>

.fitContentDiv {
  width: fit-content;
  margin: 0 auto;
  height: 100px;
  background: red;
  padding: 20px;
}

必须配合margin: 0 auto;来使用来可以实现居中的效果。

注意：同样是存在浏览器的兼容性问题。

垂直居中

文字的垂直居中
图片的垂直居中
已知元素高度的垂直居中
未知元素高度的垂直居中

文字的垂直居中

方法一：height=line-height

这个比较简单，只需要设置高度height和行高line-height相等即可。看代码：

<p class="txt1">
  我是垂直居中的文字
</p>

.txt1 {
  height: 100px;
  line-height: 100px;
  background: red;
}

注意：这个方法有个不好的地方就是只能是针对单行的文字，多行就不适合用。

方法二：使用padding

我们设置padding-top和padding-bottom相等就可以了，而且此方法针对多行文字也没问题。看代码：

<p class="txt2">
  我是垂直居中的文字
</p>

.txt2 {
  padding-top: 20px;
  padding-bottom: 20px;
  background: red;
}

注意：这种方法也是有一个明显的缺陷，就是你不能给文本的父元素设置高度。

方法三：table+table-cell

此方法是利用表格单元格的特性，我们直接看代码：

<div class="parent6">
  <div class="child6">我是垂直居中的文字（这里面也可以放图片）</div>
</div>

.parent6 {
  display: table;
  width: 300px;
  height: 300px;
  background: blue;
}

.child6 {
  display: table-cell;
  vertical-align: middle;
}

此方法对图片同样有效，而且文本也可以多行，是一种不错的方法。

图片的垂直居中

使用vertical-align: middle，直接看代码：

<p class="img-va-center">
  <img src="https://via.placeholder.com/150" alt="">
</p>

.img-va-center {
  height: 300px;
  line-height: 300px;
  background: red;
}

.img-va-center img {
  display: inline-block;
  vertical-align: middle;
}

已知元素高度的垂直居中

方法一：绝对定位+负边距

看代码：

<div class="parent6">
  <div class="child6">我是垂直居中的div</div>
</div>

.parent6 {
  position: relative;
  height: 300px;
  background: red;
}

.child6 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  background: gray;
}

未知元素高度的垂直居中

方法一：绝对定位+transform

直接上代码了：

<div class="parent7">
  <div class="child7">我是垂直居中的div</div>
</div>

.parent7 {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.child7 {
  position: absolute;
  top: 50%;
  width: 50px;
  padding: 10px;
  background: gray;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

注意：同样需要考虑transform的兼容性问题。

方法二：flex+margin

<div class="parent8">
  <div class="child8">我是垂直居中的div</div>
</div>

.parent8 {
  display: flex;
  width: 300px;
  height: 300px;
  background: blue;
}

.child8 {
  margin: auto;
  padding: 20px;
  background: gray;
}

注意：此方法要考虑flex的兼容性问题。

方法三：flex+align-items

<div class="parent9">
  <div class="child9">我是垂直居中的div</div>
</div>

.parent9 {
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  background: blue;
}

.child9 {
  padding: 20px;
  background: gray;
}

注意：此方法要考虑flex的兼容性问题。