两种优雅的CSS3垂直居中方法

toddmark 发布于2019-08-29 12:17 / 3002人阅读

摘要：摘要面向现代浏览器，已经提供了很好的方法实现垂直居中，本文介绍了其中两种常用的方法，无需借助额外的结构或代码，纯实现垂直居中，并且在国内的设备上都可以兼容。

摘要

面向现代浏览器，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%)

transform浏览器兼容性

从上图可见，国内大约90%的设备都可以支持。

方法二：flex布局

对需要垂直居中的元素的父元素增加一个class，

.container{
    display: flex;
    align-items: center;
}

点我查看demo-2

flex布局可做的太多了，单纯做垂直居中真的大材小用。

flex布局浏览器兼容性

从上图可见，国内大约90%的设备都可以支持。

海外云主机 GPU服务器垂直居中数据统计的两种方法实现垂直居中水平垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111800.html

16种水平居中垂直居中方法

摘要：原文链接水平居中若是行内元素给其父元素设置即可实现行内元素水平居中若是块级元素该元素设置即可若子元素包含属性为了让子元素水平居中则可让父元素宽度设置为并且配合作如下设置是中给属性新加的一个属性值它配合可以轻松实现水平居中原文链接水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin...

jerry 2019-08-30 15:54 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

张金宝 2019-08-20 17:44 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
css实现元素水平垂直居中

摘要：结构如下实验结果如下实现了子元素的水平垂直居中，同时可观察到两张图溢出的方式不同绝对定位的溢出或或的溢出 1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的position设为absolute，绝对定位；以及设置left和top为50%；再加上负边距，margin-left值为w...

ninefive 2019-08-29 13:46 评论0 收藏0