关于css:CSS-垂直居中的方式

垂直居中

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

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;
   }