关于CSS竖直居中

关于最优雅实现 css 竖直方向居中的苦苦追寻。

Published @ Nov 20, 2014

今晚又纠结了好长时间关于如何实现一个 html 中的竖直居中,总算找到一个还不错的方案。

对于这个“还不错”的定义,主要是以下两点:

  1. 最好不需要关心任何高度,实在不行的话至少不需要关心父元素的高度;
  2. 实现的方式较为自然;

找到的方法如下:

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

只需要将这个absolute-center元素放在一个position: relative的容器中,并且指定该元素的高度即可实现竖直居中,如何指定了宽度会同时实现水平居中。

原理比较好理解,首先让子元素强制完全填充父元素。然后margin: auto会让不够填充的空间自动产生左右及上下对等的margin

示例如下:


参考链接: Absolute Horizontal And Vertical Centering In CSS,还有一个各种方案的整理

PS. 关于是否能够在html>body中添加css,可以参考StackOverFlow上的回答

END