居中布局

写在前面

CSS中内容水平居中、垂直居中是经常有的需求，在不同的场景，居中的方式也不同，此篇文章就总结下CSS居中的各种方法。

水平居中

内联元素

爸爸身上写 text-align:center;

块级元素

此时的块级元素必须是 display: block 的纯块级元素，并且设置了最大宽度或者宽度的，才能使用此方法水平居中。 display: inline-block 的元素无法使用该方式水平居中。

margin-left: auto;
margin-right: auto;

垂直居中

若父元素的 height 高度没有写，则默认是子元素撑开的高度，此时子元素若想垂直居中，直接在父元素内：padding: 20px 0; 即可。

忠告：父元素能不写高度就不写高度，否则垂直居中起来比较困难

若父元素的 height 高度写死了，垂直居中就比较麻烦了，有如下方法：

1. 使用 table 自带居中

table 的单元格(td)内的元素默认垂直居中，因此可以用 table

<table class="parent">
    <tr>
      <td class="child">
        这是一个测试测试
      </td>
    </tr>
  </table>

.parent{
  border: 1px solid red;
  height: 300px;
}
.child{
  border: 1px solid blue;
}

2. 巧用 类table + vertical-align: middle;

vertical-align: middle; 是只使用于内联元素或者内联块元素、或 table 表格中单元格的垂直居中的CSS属性，可巧用该属性进行垂直居中布局，如下：

2.1 改造 div 为 table 使用 vertical-align: middle;

<div class="table">
      <div class="td">
        <div class="child">
          这是一个测试
        </div>
    </div>
  </div>

div.table{
  display: table;
  border: 3px solid red;
  height: 200px;
}
div.tr{
  display: table-row;
  border: 1px solid green;
}
div.td{
  display: table-cell;
  border: 2px solid blue;
  vertical-align: middle; /*table-cell 单元格垂直居中，这句在起作用*/
}
.child{
  border: 1px solid black;
}

2.2 设置元素为 inline-block 元素使用 vertical-align: middle;

1. 添加始末两个 span 元素

<div class="parent">
    <span class=before></span>
    <div class="child">
      这是一个测试
    </div>
    <span class=after></span>
</div>

.parent{
  border: 3px solid red;
  height: 200px;
  text-align: center;
}
.child{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}
.parent .before{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

2. 使用伪元素在始末添加元素

 <div class="parent">
    <div class="child">
      这是一个测试
    </div>
</div>

.parent{
  border: 3px solid red;
  height: 200px;
  text-align: center;
}
.child{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}
.parent:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent:after{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

效果和上述一样。

PS: 使用添加元素的方式一定要始末都要添加，添加一个看起来是水平居中，但其实有误差，左右都添加一个才是水平居中

3. 使用绝对定位 absolute

3.1 手动计算尺寸结合 margin

<div class="parent">
    <div class="child">
      这是一个测试
    </div>
</div>

.parent{
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -50px;
}

3.2 用 translate

还是上述的代码，将手动计算的 margin 改为 translate 就行

.child{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

3.2 用 margin: auto

还是上述代码，将 margin 全为 auto，然后结合绝对定位值

.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

4. 使用 flex 布局

.parent{
  height: 200px;
  border: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}

5. 单行文字居中特别版

当涉及到文字居中时，一般情况下，父元素如果没有写死高度的话，文字默认是居中的，但是如果父元素将高度写死了的话，文字就不再居中了。

对于不确定的多行文字，只能按照常规的垂直居中布局来写了。

对于确定的单行文字，且父元素中只有一行文字的子元素，则有一种更简单的垂直居中方式就是将父元素的行高
line-height 设置为和高度 height 一样高即可垂直居中。

但是该种居中的方式，只适用于父元素没有 border 的情况，如果有 border ，则设置的 line-height 不应该是和 height 一样高，具体看 line-height 的相关定义。