本文将教你一个很有用的技巧——如何使用 CSS 做到完全的垂直居中。我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：

1

2

3

4

5

.Absolute-Center {

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

　　我并不是第一个发现这种方法的人（不过我还是敢把它叫做“完全居中”），它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论，我甚至根本就不会发现这个办法。

　　上面那篇文章的评论栏中，Simon提供了一个jsFiddle的链接，其他的方法相比之下就相形见绌了。（Priit也在评论栏中提到了同样的方法）。深入研究了一番之后，我又用某些关键词找到了记载这种方法的三个网站：站点一、站点二、站点三。

　　以前从未用过这种方法的我想试试，看看这种”完全居中”的方法到底有多么神奇。 好处：

　　同时注意：

浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以运行在IE8~IE10上

　对照表

　　“完全居中”并不是本篇文章中唯一的选项。要做到垂直居中，还存在着其他方法，各有各的长处。采取什么样的方法，取决于你所支持的浏览器，以及现有标签的结构。下面这张对照表能够帮你选出最符合你需要的方法。

所用样式

支持的浏览器

是否 响应式

内容溢出后的样式

resize:both

高度可变

主要缺陷

Absolute

现代浏览器&IE8+

是

会导致容器溢出

是

是*

‘可变高度’的特性不能跨浏览器

负margin值

所有

否

带滚动条

大小改变后不再居中

否

不具有响应式特性，margin值必须经过手工计算

Transform

现代浏览器&IE9+

是

会导致容器溢出

是

是

妨碍渲染

Table-Cell

现代浏览器&IE8+

是

撑开容器

否

是

会加上多余的标记

Inline-Block

现代浏览器&IE8+&IE7*

是

撑开容器

否

是

需要使用容器包裹和hack式的样式

Flexbox

现代浏览器&IE10+

是

会导致容器溢出

是

是

需要使用容器包裹和厂商前缀（vendor prefix）

　说明

　　在研究了规范和文档后，我总结出了“完全居中”的工作原理：

　　1.在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。

　　 If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

　　2. 设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。  …an element that is positioned absolutely is taken out of the flow and thus takes up no space

　　3. 设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了position: relative; 样式的容器。  For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

　　4. 给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。  The margin of the [absolutely positioned] element is then positioned inside these offsets.

　　5. 既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。  If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

　　使用“完全居中”，有意遵照了标准margin: auto; 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。

　对齐 　　容器内对齐

　　使用“完全居中”，就可以在一个设置了position: relative的容器中做到完全居中元素了！ （居中例子，请前往英文原文查看）

1

2

3

4

5

6

7

8

9

10

11

12

.Center-Container {

  position: relative;

}

 

.Absolute-Center {

  width: 50%;

  height: 50%;

  overflow: auto;

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

　　接下来的示例会假设已经包含了以下样式，并且以逐步添加样式的方式提供不同的特性。

　　在可视区域内居中

　　想要使内容区在可视区域内居中么？设置position: fixed样式，并设置一个较高的z-index值，就可以做到。

1

2

3

4

.Absolute-Center.is-Fixed {

  position: fixed;

  z-index: 999;

}

　　移动版Safari的说明：如果外面没有一层设置position: relative的容器，内容区会以整个文档的高度的中心点为基准居中，而不是以可视区域的高度中心点为基准居中。

　　偏移值