vimcaw的个人博客
首页
Loading...
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
8
.parent {
  text-align: center;
  height: 500px;
}

.content{
  line-height: 500px;		/* 行高设置为父元素高度 */
}

兼容性：IE 6+

固定宽高元素

拉伸居中

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

.content{
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

兼容性：IE 6+

负值margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;		/* 宽高 / 2 + padding */
}

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

兼容性：IE 6+

自动宽高元素

呈现为表格

1
2
3
4
5
6
7
8
9
.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.content{
  display: inline-block;		/* 行内或行内块元素可省略此行 */
}

兼容性：IE 8+

呈现为行内块元素再对齐

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

1
2
3
4
5
6
7
8
9
.parent {
  text-align: center;
  height: 500px;
}

.content{
  display: inline-block;
  line-height: 500px;
}

当该元素周围存在行内元素或行内块元素时，会导致其无法像块元素一样独占一行，此时需要在其外层再加一层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
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

兼容性：IE 9+

Flex

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

兼容性：IE 10+（IE 10 需要前缀-ms-）

Grid

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

兼容性：IE 10+（IE 10 需要前缀-ms-）

The End

© 本文著作权归 vimcaw 所有，未经许可，不得转载使用。

推荐文章

Powered by hexo文章推荐插件