水平垂直居中

转：小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;    /* 有了这个就自动居中了 */
}