7种方式实现垂直居中

其实如果父元素的height不确定，只需要把padding:10px 0;就能将子元素垂直居中。

如果父元素的高度写死了，就很难实现子元素居中了，但下面我还是提供了7种垂直居中的方法。

1.table自带功能

利用table自带功能，即<table></table>配合<tr></tr>、<td></td>实现

<table style="height: 400px; border: 1px solid red;"><tr><td style="border: 1px solid green;">一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊</td></tr>

</table> 

2.100%高度的after before加上inline-block

这种方法还有一种优化版本，请自行搜索哦。

 <span class=before></span><div class="child&