列出元素垂直居中的方案

一、水平居中

水平居中的实现很简单，这儿就不赘述了。

行内元素使用：text-align:center 可以做到水平居中

块级元素使用：margin: 0 auto 可以做到水平居中

二、垂直居中

行内元素居中

单行的垂直居中可以通过设置元素 line-height 为父元素的高度，完成垂直居中

块级元素居中

使用 table-cell

对父级元素设置 display 和 vertical-align：

display: table-cell;
vertical-align: middle;

已知元素宽高时，使用 absolute 和 margin

优点：兼容性好，是最常用的一种设置水平、垂直居中的方案

缺点：需要知道元素宽高

设置父元素为：

/* 非static就行 */
position: relative;

设置子元素（假设宽高分别为 500px，600px）的 top 和 bottom：

position: relative;
top: 50%;
height: 50%;
/* 1/2的子元素高度 */
margin-top: -300px;
/* 1/2的子元素宽度 */
margin-left: -250px;

未知宽高的元素居中，使用 absolute 和 transform

优点：不需要知道元素高度、宽度就可以设置居中

缺点：由于 transform 属性是 css3 属性，IE9 以下无法使用

父元素：

/* 非static就行 */
position: relative;

子元素：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

绝对定位居中(Absolute Centering)

优点：支持跨浏览器，包括 IE8-IE10；

缺点：必须声明高度（查看可变高度 Variable Height）；在 Windows Phone 设备上不起作用。

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

行内块元素

优点： 高度可变、内容溢出会将父元素撑开、 支持跨浏览器，也适应于 IE7。

缺点：需要一个容器、水平居中依赖于 margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整、内容块宽度不能超过容器的 100% - 0.25em。

父元素：

text-align: center;
overflow: auto;

子元素：

display: inline-block;
vertical-align: middle;

伪元素：

content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */

基本思想是使用 display: inline-block, vertical-align: middle 和一个伪元素让内容块处于容器中央。