css使用position定位如何让元素居中

使用position生成绝对定位的元素

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

如何让元素居中

方法一

针对已知宽高，可使用margin

.box{
    width:600px;
    height:300px;
    position:absolute;
    /*position:fixed;*/
    left:50%;
    top:50%;
    margin-left:-300px;/*宽度的一半*/
    margin-top:-150px;/*高度的一半*/
}

或者使用

margin:auto;

方法二

使用css3中的transform，未知宽高和已知宽高都可使用
1.横向居中

.box{
    width:auto;
    height:40px;
    padding:20px; 
    position:absolute;
    top:50px;
    left:50%;
    transform:(-50%,-50%);
}

2.横竖都居中，将上面top改为

top:50%;