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>