上下左右居中的方法总结

居中的方法有很多，比较难的是选择合适的方法。

今天搜了一下，总结一下各种居中方法的优缺点。
演示效果

方法一

使用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 不会被截断，滚动条出现

缺点：

需要多余的元素

推荐阅读：

深入了解 Flexbox 伸缩盒模型
未知尺寸元素水平垂直居中