水平、垂直居中的若干种方法总结

一、水平居中

水平居中的实现很简单，这儿就不赘述了。
行内元素使用：text-align:center 可以做到水平居中
块级元素使用：margin: 0 auto 可以做到水平居中

二、垂直居中

2.1 行内元素居中

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

2.2 块级元素居中

• 2.2.1 使用table-cell

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

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

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

  优点：兼容性好，是最常用的一种设置水平、垂直居中的方案
  缺点：需要知道元素宽高
  设置父元素为：

position: relative; //非static就行

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

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

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

优点：不需要知道元素高度、宽度就可以设置居中
缺点：由于transform属性是css3属性，IE9以下无法使用

父元素：

position: relative; //非static就行

子元素

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

• 2.2.4 绝对定位居中(Absolute Centering)

实现原理请参考freshlover的专栏

优点：支持跨浏览器，包括IE8-IE10；
缺点：必须声明高度（查看可变高度Variable Height）；在Windows Phone设备上不起作用。

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

• 2.2.5 行内块元素

优点： 高度可变、内容溢出会将父元素撑开、 支持跨浏览器，也适应于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和一个伪元素让内容块处于容器中央。