水平居中
水平居中比较简单，这里只简单概述一下：
- 对于行内元素来说（span、img、input等），直接
text-align:center;即可搞定； - 对于块级元素，使用
margin: 0 auto;也可以搞定；
还有其它一些方法，比如借助绝对定位等，不过更麻烦也不太推荐，所以不讲。
垂直居中主要有8种方法，本文只介绍7种，还有一种个人觉得不伦不类，懒得写了。
完整DEMO演示地址：http://demo.liuxianan.com/2016/11/26-vertical-align-center/
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方式垂直居中的话还需要一个额外的标签。
<style type="text/css"> .parent { display:table; width: 700px; height: 400px; background: #3BB7FF; *position: relative; /*IE hake*/ } .children { display:table-cell; vertical-align:middle; *position: absolute; *top:50%; /*IE hake*/ } .content { width:300px; margin:0 auto; background: #00FD2A; *position: relative; *top:-50%; /*IE hake*/ } </style> <div class="parent"> <div class="children"> <div class="content"> 表格法兼容性好，支持IE6+，支持动态高度，表格法兼容性好，支持IE6+，支持动态高度，表格法兼容性好，支持IE6+，支持动态高度，表格法兼容性好，支持IE6+，支持动态高度表格法兼容性好，支持IE6+，支持动态高度。 </div> </div> </div> 注意
.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+才兼容，移动端虽然都支持但是也存在部分兼容问题.
- 需要添加浏览器私有前缀.