懒人原生移动端(高版本浏览器)上下左右居中模块

懒人原生移动端(高版本浏览器)上下左右居中模块-精品资源网
懒人原生移动端(高版本浏览器)上下左右居中模块
此内容为免费资源,请登录后查看
0
免费资源

懒人原生移动端(高版本浏览器)上下左右居中模块

效果描述:
之前给大家介绍过一个上下左右垂直居中的效果
今天再给大家介绍一个部分基于css3的上下左右垂直居中效果
大家都知道给一个div设置相对定位,左侧、顶部的高度分别设置50%
剩下的靠margin解决,而margin只接受具体的数值,那么问题来了
当我们的div高度宽度在未知的情况下是无法使用margin的
那么这个时候可以用css3代码弥补这一问题:
css3的transform:translate(A,B) 属性
它可以移动模块的位置
接受两个数值,A是x轴方向,B是y轴方向
我们分别设置-50%,那么就可以实现模块的绝对居中了
 
使用方法:
1、将class="lanren"的样式复制到你需要居中的模块最外层,无论你里面多大,均可以实现居中
© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容