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