通过display转化成为表格的形式,再采用垂直居中的方法得到垂直居中的效果。
display:table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
display:table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>
代码示例:
<div style="display: table; width:200px; height:200px; text-align:center; border:1px solid #ccc">
<span style="display:table-cell; vertical-align: middle;">
垂直居中的内容
</span>
</div>