水平垂直居中

转：小tip: margin:auto实现绝对定位元素的水平垂直居中

法一：兼容性不错的主流用法，但是必须知道元素的尺寸，否则margin负值无法精确，往往需要js的支持

.element{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

法二：使用css3的transform代替margin。transform中translate偏移的百分比值是相对于自身大小的。

.element {
width: 600px; height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

其问题是兼容性不好，绝对定位实现的居中还有另外一种方法，权衡了尺寸自适应和兼容性的一个方案。

法三：margin:auto实现绝对定位元素的居中

.element {
width: 600px; height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;    /* 有了这个就自动居中了 */
}