9.如何让一个div 上下左右居中?【CS

 

方法1：【绝对定位50%-本身50%】

             position:absolute; left:50%; top:50%;

             transform: translate(-50%,-50%); 

.div1{
          width:400px;
          height:400px;
          border:#CCC 1px solid;
          background:#99f;
          position:absolute; left:50%; top:50%;/*绝对定位*/
          transform: translate(-50%,-50%); 
/*translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动*/
} 
 
<div class="div1"></div>        

方法2：不太懂

 .div2{
            width:400px;
            height:400px;
            border:#CCC 1px solid;
            background:#99f;
            position: absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
}
<div class="div2"></div>                            

方法3：【绝对定位50%-本身50%】

 .div3{
　　　　width:400px;
　　　　height:400px;
　　　　border:#CCC 1px solid;
　　　　background:#9f9;
　　　　position: absolute;
　　　　left: 50%;
　　　　top:50%;
　　　　margin-left:-200px;
　　　　margin-top: -200px;
}
<div class="div3"></div>