摘要:摘要面向现代浏览器,已经提供了很好的方法实现垂直居中,本文介绍了其中两种常用的方法,无需借助额外的结构或代码,纯实现垂直居中,并且在国内的设备上都可以兼容。
摘要
面向现代浏览器,CSS3已经提供了很好的方法实现垂直居中,本文介绍了其中两种常用的方法,无需借助额外的html结构或js代码,纯CSS3实现垂直居中,并且在国内90%的设备上都可以兼容。
方法一:transform本元素相对于父元素垂直居中
.container{ position: relative; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
点我查看demo-1
看起来相当容易理解,就是先把元素下移父元素高度的50%,然后再上移自身高度的50%。
严谨地来讲,这方法还同时实现了水平居中,不需要的话把left: 50%去掉,并改成transform: translateY(-50%)
从上图可见,国内大约90%的设备都可以支持。
方法二:flex布局对需要垂直居中的元素的父元素增加一个class,
.container{ display: flex; align-items: center; }
点我查看demo-2
flex布局可做的太多了,单纯做垂直居中真的大材小用。
flex布局浏览器兼容性从上图可见,国内大约90%的设备都可以支持。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111800.html
摘要:原文链接水平居中若是行内元素给其父元素设置即可实现行内元素水平居中若是块级元素该元素设置即可若子元素包含属性为了让子元素水平居中则可让父元素宽度设置为并且配合作如下设置是中给属性新加的一个属性值它配合可以轻松实现水平居中 原文链接 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin...
摘要:同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候,遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者:孙辉,美团金融前端团队成员。15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: https://sunyuhui.com ...
摘要:同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候,遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者:孙辉,美团金融前端团队成员。15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: https://sunyuhui.com ...
摘要:结构如下实验结果如下实现了子元素的水平垂直居中,同时可观察到两张图溢出的方式不同绝对定位的溢出或或的溢出 1.绝对定位,利用负边距 利用负边距实现子元素居中(相对于父元素(position:relative)),需已知子元素的width与height;且把子元素的position设为absolute,绝对定位;以及设置left和top为50%;再加上负边距,margin-left值为w...
阅读 3209·2021-11-23 09:51
阅读 3668·2021-09-22 15:35
阅读 3645·2021-09-22 10:02
阅读 2956·2021-08-30 09:49
阅读 509·2021-08-05 10:01
阅读 3376·2019-08-30 15:54
阅读 1633·2019-08-30 15:53
阅读 3558·2019-08-29 16:27