元素的垂直居中的方法

96
九彩拼盘
2015.03.30 17:42* 字数 93

单行文本的垂直居中

只需让元素的行高的值设置成和高度的值一样即可。如

height: 30px;
line-height: 30px;

高度不固定的元素的垂直居中

使用 Flex

父元素加

display: flex; 
align-items: center;

然后就搞定了,很简单吧。

使用 table 布局

父元素加

display: table; /*让元素以表格形式渲染*/
height: 200px; /* 需要定宽,定高 */
width: 100px;

子元素加

display: table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;

用绝对定位

父元素使用定位

position: relative; // absolute,fixed 也可以。只要不是 static。

子元素

position: absolute;
top: 50%;
transform: translateY(-50%);
🐋 Web 前端
Web note ad 1