元素的垂直居中的方法

單行文本的垂直居中

隻需讓元素的行高的值設定成和高度的值一樣即可。如

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%);           

複制