前端培训面试题讲解-如何保持浮层水平垂直居中

发布时间:2020年02月18日作者:atguigu浏览次数:1,034

(1)利用绝对定位和transform

如果不确定子元素宽高度情况下,可以用此方法,不过css3属性不兼容IE低版本浏览器

(2) 利用flexbox

(3)将父元素定位,子元素绝对定位,利用margin负值为子元素宽高的一半来实现。

(4) 利用定位与margin: auto;

原理:因为 parent 宽度等于 child宽度 + left + right + marginLeft + marginRight,当设置了left:0;right:0;margin: auto;时候,就相当于左右平分了宽度,所以会水平居中,垂直方向也是一样的道理
 
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习

上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦3层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)

成都市成华区北辰星拱青创园综合楼3层(成都校区)