CSS-div居中

01.宽高固定的div在浏览器中水平/垂直居中

absolute将元素脱离文档流,通过“left: 50%; top: 50%;”和“margin-left: -width/2; margin-top: -height/2;”来实现;

.boxA{
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -130px;
}

02.div绝对居中示例

在支持“display: table-cell;”的浏览器中,可以通过“vertical-align: middle;”实现垂直居中,利用“margin: 0 auto;”来实现水平居中;
在IE6/IE7中药通过两层div分别设置“left: 50%; top: 50%”和“left: -50%; top: -50%;”来实现居中; 

<div id="wrapper"> 
    <div id="mid"> 
        <div id="box"><p>Div绝对居中示例</p></div> 
    </div> 
</div>    
#wrapper{
    display: table-cell;
    vertical-align: middle;
    *position:relative;
}
#mid{
    *position: absolute;
    *top:50%;
    *left:50%;
}
#box{
    margin:0 auto;
    *position:relative;
    *top:-50%;
    *left:-50%;
}
高否?富否?帅否? 否? 滚去学习!
原文地址:https://www.cnblogs.com/baixc/p/3670582.html