div 居中-垂直居中、居上、居下对齐

作者:vkvi 来源:千一网络(原创) 日期:2019-3-11

法一、采用 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; }



相关文章
文章评论