居中的方法有很多，比较难的是选择合适的方法。
今天搜了一下，总结一下各种居中方法的优缺点。
演示效果
方法一
使用flexbox伸缩盒布局
优点：
- 简单，可能以后会成为主流
缺点：
- 兼容性差 查看这里
##方法二
把包裹的父容器显示方式改成table,子元素改成table-cell,然后table-cell里面的元素就可以使用vertical-align 属性。（当然不只是table-cell,vertical-align适用于 inline level, inline-block level 及 table-cells 元素上），再加上左右居中就行了。
####优点：
- 可以自适应高度
缺点：
- 万恶的IE6/7不支持此属性
- 使用多一个div
方法三
现在比较常用的方法，top设置为50%，然后margin-top设置成 -（自身高度的一半）
优点：
- 简单，常用
缺点：
- 自适应程度不高，需要设置固定的高度
方法四
移动设备上经常会用到，特别是当你不知道父容器的大小和自身的大小的时候。
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
优点：
- 简单粗暴，高度自适应（不管你大小宽高多少，都能上下左右居中）
缺点：
- 浏览器兼容问题~ 要增加前缀（-webkit-transform 等）
- 在这基础上使用CSS 3动画会有冲突（使用到transform）
方法五
设置了宽高以后，下面的css代码就能上下左右居中了呢~
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: auto;
优点：
- 简洁
缺点：
- 需要设置宽高，空间不够的时候，内容会被截断。
- 万恶的IE6/7不支持此属性
方法六
一种小技巧， 设置一个float div,高度50%,margin-bottom设置成为-（居中div的高度一半），然后居中div设置clear:both,mrgin:auto（左右居中）即可~~
优点：
- 适用于所有浏览器
- 没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现
缺点：
- 需要多余的元素
