CSS实现垂直居中的方法

父元素高度固定时垂直居中方法

• table 内容放到 table中即可

.parent{
  border:1px solid red;
  height:600px;
}
.child{
  border:1px solid green;
}
<table class="parent">
    <tr>
      <td class="child">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi praesentium eum dolor dignissimos dolores, tenetur quod perspiciatis nesciunt possimus voluptates aliquam delectus ad reprehenderit nihil ducimus fugiat cumque tempore eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem porro quibusdam delectus voluptatibus culpa mollitia fugiat at nesciunt animi sit reiciendis nobis possimus quos impedit, reprehenderit nisi, praesentium doloremque sunt!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at laudantium eum libero necessitatibus ut consequuntur doloremque vero, eveniet, officiis, numquam non possimus ex voluptatibus commodi provident repellendus, porro minus?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum cupiditate dolor iste necessitatibus maxime fugit voluptas dolore odit eaque nostrum sint adipisci veniam sunt, reprehenderit eos odio molestias maiores possimus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente facilis magnam consequuntur rerum aspernatur alias iste, inventore fugiat sit eaque incidunt reprehenderit asperiores quo? Assumenda consectetur repudiandae quae, eveniet cupiditate.   
      </td>
    </tr>
</table>

• div 模拟table 使用 display:table；让 父div 变成 table ，display:table-cell,让 div.td变成 table-cell, vertical-align:middle 让内容垂直居中

       .parent{
            border: 1px solid red;
            height: 600px;
            display: table;
        }
        .td{
            display: table-cell;
            vertical-align: middle;
        }
       .child{
            border:1px solid greenyellow
        }
<div class="parent">
        <div class="td">
            <div class="child">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus vitae dolores ut doloremque! Dolore, ab autem molestiae, dolorum minus dolor, perferendis molestias velit reprehenderit quod earum voluptates recusandae quo facere.
            </div>
        </div>
</div>

• 绝对定位 元素宽高确定垂直居中 top,right,bottom,left 值都为 0,margin:auto

    .parent {
        border: 1px solid red;
        height: 600px;
        display: table;
        position: relative;
        width: 100%;
      }
      .child {
        border: 1px solid greenyellow;
        position: absolute;
        width: 100px;
        height: 100px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    <div class="parent">
      <div class="child"></div>
    </div>

• 绝对定位 元素宽高不确定 垂直居中

      .parent {
        border: 1px solid red;
        height: 600px;
        display: table;
        position: relative;
        width: 100%;
      }
      .child {
        border: 1px solid blueviolet;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate( -50%,-50%);
      }
    <div class="parent">
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto blanditiis omnis consequuntur magni fugiat accusantium delectus nihil facilis sint a velit vitae porro, necessitatibus inventore doloribus earum corrupti. Voluptatem, nam.
      </div>
    </div>

• flex 垂直居中

      .parent {
        border: 1px solid red;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .child {
        border: 1px solid blueviolet;
       
      }
    <div class="parent">
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto blanditiis omnis consequuntur magni fugiat accusantium delectus nihil facilis sint a velit vitae porro, necessitatibus inventore doloribus earum corrupti. Voluptatem, nam.
      </div>
    </div>

• grid 垂直居中 网格项place-self:center

   .parent {
        border: 1px solid red;
        height: 600px;
        display: grid;
      }
      .child {
        border: 1px solid blueviolet;
        width:200px;
        place-self: center;
      }
    <div class="parent">
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto blanditiis omnis consequuntur magni fugiat accusantium delectus nihil facilis sint a velit vitae porro, necessitatibus inventore doloribus earum corrupti. Voluptatem, nam.
      </div>
    </div>