https://jscode.me/t/topic/1936
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。
忠告：能不写 height 就千万别写 height。
1.table自带功能
<table class="parent">
<tr> <td class="child"> 一串文字一串文字一串文字一串文字 </td> </tr>
</table>
.parent{ height: 600px;}
2.div 装成 table
<div class="table">
<div class="td"> <div class="child">一串文字一串文字一串文字 </div></div>
</div>
div.table{ display: table; height: 600px;}
div.td{ display: table-cell; vertical-align: middle;}
3.margin-top -50%
<div class="parent"> <div class="child">一串文字一串文字</div> </div>
.parent{ height: 600px; position: relative;}
.child{ position: absolute; top: 50%; margin-top: 负的高度一半;}
4.translate -50%
<div class="parent"> <div class="child"> 一串文字一串文字 </div></div>
.parent{ height: 600px; position: relative;}
.child{ position: absolute; top: 50%; transform: translateY(-50%);}
5.absolute margin auto
<div class="parent"> <div class="child"> 一串文字一串文字 </div></div>
.parent{ height: 600px; position: relative;}
.child{ position: absolute; height: 200px; margin: auto; top: 0; bottom: 0; left: 0; right: 0;}
6.flex
<div class="parent"> <div class="child"> 一串文字一串文字 </div></div>
.parent{ height: 600px; display: flex; justify-content: center; align-items: center;}
