我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：
.Absolute-Center { margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}我并不是第一个发现这种方法的人（不过我还是敢把它叫做“完全居中”），它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论，我甚至根本就不会发现这个办法。
上面那篇文章的评论栏中，Simon提供了一个jsFiddle的链接，其他的方法相比之下就相形见绌了。（Priit也在评论栏中提到了同样的方法）。深入研究了一番之后，我又用某些关键词找到了记载这种方法的三个网站：站点一、站点二、站点三。
以前从未用过这种方法的我想试试，看看这种”完全居中”的方法到底有多么神奇。 好处：
- 跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
- 无特殊标记，样式更精简
- 自适应布局，可以使用百分比和最大最小高宽等样式
- 居中时不考虑元素的padding值（也不需要使用box-sizing样式）
- 布局块可以自由调节大小
- img的图像也可以使用
同时注意：
- 必须声明元素高度
- 推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题
- 这种方法在Windows Phone上不起作用
浏览器支持：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） |
说明
在研究了规范和文档后，我总结出了“完全居中”的工作原理：
- 在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。
W3.org If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.
2. 设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。 Developer.mozilla.org …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; 样式的容器。 Developer.mozilla.org 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; 的要求，重新计算，并包裹一层新的盒子。 Developer.mozilla.org The margin of the [absolutely positioned] element is then positioned inside these offsets.
5. 既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 W3.org 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的容器中做到完全居中元素了！ （居中例子，请前往英文原文查看）
.Center-Container { position: relative;
}.Absolute-Center { width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}.Absolute-Center.is-Fixed { position: fixed;
z-index: 999;
}