让一个div 上下左右居中
Posted 可以叫我老张
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让一个div 上下左右居中相关的知识，希望对你有一定的参考价值。
方法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 上下左右居中的主要内容，如果未能解决你的问题，请参考以下文章