固定定位position:fixed实现高度自适应

本文介绍了一种利用CSS的position:fixed属性结合translate方法来实现元素的居中显示技巧。通过对top和left属性设置为50%,再使用translate(-50%,-50%)将元素在水平和垂直方向上进行精确调整,使元素能够完美地居中于页面之中。

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%,以使其居于中心位置。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值