CSS水平居中方法及其兼容性大汇总

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

假设HTML结构类似:

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

行内元素或行内块元素

1
2
3
.content {
text-align: center;
}

兼容性:IE 3+

固定宽度元素

1
2
3
4
.content{
width: 200px;
 margin: 0 auto;
}

兼容性:IE 6+

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

呈现为表格

1
2
3
4
.content{
display: table;
margin: 0 auto;
}

兼容性:IE 8+

呈现为行内块元素再对齐

利用display: inline-block将其呈现为行内块元素,再利用行内块元素的水平居中方法进行水平居中。

1
2
3
.content {
text-align: center;
}

当该元素周围存在行内元素或行内块元素时,会导致其无法像块元素一样独占一行,此时需要在其外层再加一层div元素:

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

兼容性:IE 8+

绝对定位

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

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

兼容性:IE 9+

Flex

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

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

Grid

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

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

The End