讓一個div 上下左右居中
阿新 • • 發佈：2017-07-30
abs border form translate tom 上下左右 margin 方法 sla
方法1：
.div1{
width:400px;
height:400px;
border:#CCC 1px solid;
background:#99f;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
<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：
.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>
讓一個div 上下左右居中