CSS垂直居中方法及其兼容性大汇总

CSS 的居中一直让人诟病,尤其是面对浏览器兼容问题的时候,
本系列将分别搜集主流的 CSS 水平居中、垂直居中、水平垂直居中方法及其兼容性。第二篇介绍 CSS 垂直居中。

假设HTML结构类似:

1
2
3
<div class="parent">
<div class="content">Center Element</div>
</div>

单行行内元素或行内块元素

让子元素行高等于父元素高度即可。

1
2
3
4
5
6
7
.parent {
height: 500px;
}

.content{
line-height: 500px;
}

兼容性:IE 6+

固定高度元素

1
2
3
4
5
6
7
8
9
10
.parent {
position: relative;
}

.content{
position: absolute;
top: 50%;
height: 100px;
 margin-top: -50px;   /*让子元素的`margin-top`等于其高度的一半,可以用`CSS预处理器`(比如`Sass`、`Less`等)自动计算。*/
}

绝对定位带来的问题是:父元素无法自适应高度包裹其子元素,而且存在其它子元素的话会出现重叠,需要用margin等方法留出空位。

兼容性:IE 6+

自动宽高元素(通用解决方案)

呈现为表格

1
2
3
4
.parent {
display:table-cell;
vertical-align:middle;
}

兼容性:IE 8+

绝对定位

这其实是固定高度元素对齐方法的修改版

1
2
3
4
5
6
7
8
.parent {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

绝对定位带来的问题是:父元素无法自适应高度包裹其子元素,而且存在其它子元素的话会出现重叠,需要用margin等方法留出空位。

兼容性:IE 9+

Flex

1
2
3
4
5
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

兼容性:IE 10+(IE 10 需要前缀-ms-)

Grid

1
2
3
4
5
6
.parent {
display: grid;
}
.content{
margin: auto 0;
}

兼容性:IE 10+(IE 10 需要前缀-ms-)

The End