垂直居中

本人整顿一下收集到的垂直居中的形式：

  1. table自带居中性能

    <table> <tr>     <td>         <div>表格垂直居中</div>     </td> </tr></table>
    <div class="like-table"> <div>假的表格垂直居中</div></div>
    .like-table{ display:table-cell;}
  2. 设定行高
    实用于「单行」的「行内元素」 ( inline、inline-block )，将line-height设成和高度一样的数值，则内容的行内元素就会被垂直置中。

  3. 设定伪类元素
    应用伪元素的形式。
    在此之前，先解释一下 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐形式。
    这个属性是加在容器外部较高的元素上, 使其基线绝对放弃在较高元素两头,
    因而，如果有一个方块变成了高度100%，那么其余的方块就会真正的垂直居中。所以应用伪类的形式，

    <div class="parent">  <div class="child">   一串文字  </div></div>.parent{  text-align: center;}.child{  border: 3px solid black;  display: inline-block;  width: 300px;  vertical-align: middle;}.parent:before{  content:'';  outline: 3px solid red;  display: inline-block;  height: 100%;  vertical-align: middle;}.parent:after{  content:'';  outline: 3px solid red;  display: inline-block;  height: 100%;  vertical-align: middle;}

  4. margin: auto

    <div class="parent">  <div class="child">   一串文字  </div></div>.parent{  height: 600px;  position: relative;}.child{  position: absolute;  width: 300px;  height: 200px;  margin: auto;  top: 0;  bottom: 0;  left: 0;  right: 0;}

  5. margin-top:-50%

    <div class="parent">  <div class="child">   一串文字  </div></div>.parent{  height: 600px;  position: relative;}.child{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);}

  6. transform

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

  7. flex布局

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

  8. grid布局

    .parent{  display:grid;  justify-content:center;  align-content:center;}