水平居中

水平居中比较简单，这里只简单概述一下：

• 对于行内元素来说（span、img、input等），直接text-align:center;即可搞定；
• 对于块级元素，使用margin: 0 auto;也可以搞定；

还有其它一些方法，比如借助绝对定位等，不过更麻烦也不太推荐，所以不讲。

垂直居中

垂直居中主要有8种方法，本文只介绍7种，还有一种个人觉得不伦不类，懒得写了。

完整DEMO演示地址：

2.1. line-height法

通过设置line-height和height相同来达到文本元素垂直居中的效果。

示例：

.test {	height: 200px; height: 200px; }

优点：简洁，简单，好记，兼容性好；

缺点：只对文本元素生效，而且文本不能超过单行。

2.2. 绝对居中法

所谓绝对居中就是：

.parent {	position: relative; width: 400px; height: 400px; } .children { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px; }

优点：

• 支持IE8+，兼容性良好.
• 代码量少，标签结构简单.

缺点：

• 高度必须定义；
• 使用了绝对定位；

2.3. 负外边距法

将设置了绝对定位的子元素水平和垂直偏移50%；然后，在水平和垂直方向分别偏移负自身宽高的一半。

.parent{
      position:relative} .children{ position: absolute; left: 50%; top: 50%;} .content{ width: 100%; height: 150px;margin-left: -50%; margin-top: -75px;}

优点：

• 兼容性好，IE6+，移动端更不用说

不足：

• 子元素的宽高值需要确定，这对于高度自适应容器是个问题.
• 最好将盒子设置box-sizing:border-box，因为偏移值是依据content+padding值来确定.

2.4. 负位移法（推荐）

将设置了绝对定位的子元素水平和垂直偏移50%；然后，通过CSS3 transform属性值将子元素偏移负自身宽高的一半。

.parent{
      position:relative} .children{ position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}

优点：

• 支持子容器高度自适应，无需显示设置宽高度；
• 代码量少.

缺点：

• 兼容性为IE8+，不过移动端兼容良好；
• 需要添加浏览器私有前缀.

2.5. 表格法

通过设置display:table/table-cell相关属性，模拟表格布局。注意，将元素设置为display:table-cell;后并不是说这个元素就可以垂直居中了，而是它的子元素相对于它垂直居中，所以使用table-cell方式垂直居中的话还需要一个额外的标签。

 
    
 
     
 
      
        表格法兼容性好，支持IE6+，支持动态高度，表格法兼容性好，支持IE6+，支持动态高度，表格法兼容性好，支持IE6+，支持动态高度，表格法兼容性好，支持IE6+，支持动态高度表格法兼容性好，支持IE6+，支持动态高度。 
      
 
     
 
    

注意.children不要设置了height:100%;，否则不兼容IE7。

优点：

• 支持高度自适应，可适用于响应式环境.
• 适用于多个子元素水平垂直居中环境.
• 兼容性良好

缺点：

• 需要额外标签。

2.6. 行内块法

通过增加一个空白元素（如伪元素），并将其高度设置为百分百，然后同时将空白元素和要居中的元素设置vertical-align: middle;即可实现垂直居中。

.parent{
      }.parent:after{ content:'';display:inline-block;vertical-align:middle;height:100%;width:0} .children{ display:inline-block;vertical-align:middle}

优点：

• 支持子元素高度自适应.
• 适用于多个子元素水平垂直居中环境.
• 兼容性良好，IE7+支持.

缺点：

• 说不上来，但是个人不太喜欢这种方式；

2.7. flex

使用CSS3新添加的flexbox弹性布局可以非常容易的实现各种居中，如一个、多个子元素的水平/垂直居中、对齐、等高；

.parent{
      display: flex; align-items: center; justify-content: center;}

优点：

• 不需要设置子元素的高度、宽度.
• 适用于任意子元素水平垂直居中环境.
• 代码量少.

缺点：

• IE10+才兼容，移动端虽然都支持但是也存在部分兼容问题.
• 需要添加浏览器私有前缀.