<div class="login-container">
<div class="login-box"></div>
</div>
.login-container{
background-color: #2b4b6b;
height: 100%;
}
.login-box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
top:50%;
left: 50%;
/*如果直接用top和left时左上角的点居中 要想div居中 就要减去div自身狂傲度的一半*/
transform: translate(-50%,-50%);
}
效果图
解释:translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。
css绝对定位中设置了transform: translate(-50%,-50%)导致文字模糊问题
原因为元素宽高为绝对定位中设置了transform: translate(-50%,-50%);属性导致,促使宽高无法整除,先检查元素宽高是否为奇数,如果是则改为偶数即可
别 transform 了,直接父元素弄成 Flex 布局,两条轴都设置居中,也能达到效果。
display: flex;
align-items: center;
justify-content: center;