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
.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

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

推荐文章

Powered by hexo文章推荐插件