position:fixed实现高度自适应
直接上样式
.mask {
/*需要宽度*/
width: 70%;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
/* 支持现代浏览器 */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置 translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。
本文介绍了一种利用CSS的position:fixed属性结合translate方法来实现元素的居中显示技巧。通过对top和left属性设置为50%,再使用translate(-50%,-50%)将元素在水平和垂直方向上进行精确调整,使元素能够完美地居中于页面之中。
1503

被折叠的 条评论
为什么被折叠?



