让⼀个div居于页⾯正中间的三种⽅法
1.
.div1{
width: 100px;
height: 100px;
background: #eee;
border: 1px solid #ccc;
position: absolute;
left: 50%;top: 50%;
margin-left: -50px;
margin-top: -50px;
}
这⼏⾏在#login_box中的⽬的是使其在浏览器中⽔平居中显⽰。（⽆论浏览器被如何拉伸，该login_box始终保持居中）
原理（对齐浏览器的中⼼点与#login_box的中⼼点，这样就使得.foot在浏览器中⽔平居中了）：
left:50%; 使div1 左边框顶点距离浏览器左边50% ，所以div1整体并不是位于浏览器中间，需要使⽤margin-left: -50px; 使div1向左移动50像素（div1⾃⾝宽度的⼀半）。这样box整体就位于浏览器中间了。
top: 50%; margin-top: -50px 的道理同上。
.div2{
width: 200px;
height: 200px;
background: #eee;
border: 1px solid rgb(204, 204, 204);
position: absolute;
left: 50%;top: 50%;
transform:translate(-50%,-50%);
}
translate(-50%, -50%)，第⼀个值是指⽔平移动量，和tansform的translateX效果⼀样，第⼆个值那就是垂直⽅向偏移量，但为负数时，代表反⽅向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既⽔平居中同时垂直居中。
2.
.div3{
width: 300px;
height: 300px;
background-color: #eee;
border: 1px solid #ddd;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
div中的div居中
margin: auto;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。