实现垂直居中的七种方法

• 如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
• 利用table自带的功能来实现垂直居中

<table class="parent">
    <tr>
      <td class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </td>
    </tr>
  </table>

.parent{
  border: 1px solid red;
  height: 600px;
}

.child{
  border: 1px solid green;
}

• 利用div+table,可以利用css将div的diplay设置为table，使它拥有table标签的特性,再将里面的div的display设置为table-cell，将这个div变成td
• 使用flex布局实现
• margin-top -50%
• translate -50%
• absolute margin auto

 <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
  

.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}