一个盒子模型在另一个盒子模型内居中
html
<div class="login_container">
<div class="login_box"></div>
</div>
css
.login_container{
display: flex;
background-color: #2b4b6b;
height: 100%;
justify-content: center; //主轴上的元素居中排列
align-items: center; //元素在辅轴上居中对齐
}
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
}
或者
.login_container{
background-color: #2b4b6b;
height: 100%;
}
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
top:50%; //当top,bottom,left,right为百分比时是相对于其包含块
left: 50%;
transform: translate(-50%,-50%); //translate中的百分比相对于自己
}