CSS之各种居中

前言

在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？ 我认为，这是因为CSS的居中方法以及它的适用范围太多了，而导致应用时很难分清到底哪个有效。下面我就简单地梳理一下CSS的居中方法。

水平居中

1.行内元素的水平居中

对于行内元素（如text、link或inline-*元素）的水平居中：

.inline {
  text-align: center;
}

这种方法对于inline-block、inline-table等等都有效。

2.块级元素的水平居中

对于块级元素（如div、p等）的水平居中：

.block {
    margin: 0 auto;
}

这种方法就是把margin-left和margin-right设置成auto。但这种方法前提是你要设置好块级元素的宽度，否则它的宽度就会铺满其父级元素。

3.多个块级元素的水平居中

当需要多个块级元素在一行内居中时，我们可以把它们设置为inline-block或者flex。

1）inline-block

.inline-block-center {
    display: inline-block;
    text-align: right;
}

2）flexbox

.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中

垂直居中比水平居中要更加复杂，下面我会按照思考的过程来逐步梳理垂直居中的方法（包括不可行的方法）：

1）

既然块级元素的水平居中可以使用margin: 0 auto，那么垂直居中能不能用margin: auto 0呢？不能。因为margin-top如设为auto，默认值为0。

2）

OK，那我手动利用calc指定margin-top

margin-top: calc(50%-50px);

这样总行了吧？不行。因为margin-top的百分比竟然是以父元素的宽度为参照。

3)

好吧，那我用relative吧：

position: relative;
top: calc(50%-50px);

这次总归行了。但是这种方法缺点就是元素的高度不能变。

4）

对于inline-element和table-cell，垂直居中同样可以使用vertical-align:

display: table-cell;
vertical-align: middle;

但这时由于table-cell是inline，宽度将会变成和子元素一样，而当强制指定width为100%时，子元素高度会变成和父元素一样。

5）

使用伪元素：

<div class="box">
    <span>垂直居中</span>
</div>

.box {
  width: 400px;
  height: 300px;
  border:1px solid red;
  text-align:center;
}

.box:before {
  content:'';
  display:inline-block;
  height: 100%;
  vertical-align:middle;
}

.box span {
  vertical-align:middle;
}

这种方法的前提是要是行内元素才能进行居中。
那为什么添加伪元素在这里会有效呢？ 根据W3C标准对vertical-align的定义是：该属性会影响由一个行内级元素生成的盒的行框内部的垂直定位。

那么伪元素在这里就是生成了一个空的100%高度的行内盒，然后行内元素以这个行内盒为基线进行垂直居中。

6)

使用flex布局：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

关于水平垂直居中，方法也有很多，很繁琐。有些可以把水平居中的方法和垂直居中的方法结合（例如添加伪元素方法的text-align + vertical-align）,在这里我就不一一介绍，只是介绍一种最好的方法——几乎万能的flex布局：

.container {
  display: flex;
  justify-content: center; 
  align-items: center;
}

justify-content影响flex-item在主轴上的位置；而align-item则会影响flex-item在交叉轴上的位置。

结语

以上的方法基本上可以用CSS完成各种情况的居中。如果读者觉得有补充或者哪个地方讲述错误，欢迎指正。