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

写在前面

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

水平居中

内联元素 / 内联块元素

爸爸身上写 text-align:center;

块级元素

有固定宽度的块级元素用以下方式水平居中，要不然默认的块级元素是占满一行，不信加个 border 试试，占满一行怎么居中?

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. 巧用 `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;
}

CSS居中那些事儿