法一、采用 table 模型的 vertical-align
div { display:table-cell; vertical-align:middle; }
div 是外层 div。改变 vertical-align 实现垂直对齐,如果无效,请使用法二。
法二、采用 flex 模型
div { display:flex; align-items:center; }
div 是外层 div。改变 align-items 实现垂直对齐。注意,这里是 align-items,并不是 align-content。
当使用了 display:flex; 之后,水平居中不再使用 text-align,而使用 justify-content。
合起来通常就是:
div { display:flex; align-items:center; justify-content:center; }
相关阅读