垂直居中
2020-03-03 本文已影响0人
fanlelee
总结归纳了几种垂直居中的方法,方便自己查阅。
1. padding
padding
使用margin原理相同,这种写法只适用于父容器没有写死height的情况。
2. table
如果用table布局,table是自带垂直居中的效果,但table布局已经过时了,因为利用table布局 违背了语义化、违背了样式与结构分离、最重要的是有更好用的div+css3布局。
<table>
<tr>
<td></td>
</tr>
</table>
可以将div改写成table:display:table/table-row/table-cell
div=>table
3. absolute
(1): 绝对定位
(2): absolute+translate -50%
(3): absolute+margin:auto