记录一下自己常用的两种简单实现水平垂直居中的方法

Soarkey 发布于2019-08-26 11:54 / 1699人阅读

摘要：实现水平垂直居中通过实现水平垂直居中主要依赖于和决定了子元素的水平位置设置即可实现子元素的水平居中决定了子元素的垂直位置设置即可实现子元素的垂直居中，这里需要设置元素高度和实现水平垂直居中另一种简单实现水平垂直居中的方

display:flex 实现水平垂直居中

通过display:flex实现水平垂直居中主要依赖于justify-content和align-items
justify-content决定了子元素的水平位置,设置justify-content:center即可实现子元素的水平居中
align-items决定了子元素的垂直位置,设置align-items:center即可实现子元素的垂直居中，这里需要设置元素高度

        .container {
            display: flex;
            height: 100%;
            width: 100%;
            background-color: #f0f0f0;
            justify-content: center;
            align-items: center;
        }

text-align:center和line-height实现水平垂直居中

另一种简单实现水平垂直居中的方法就是利用text-align:center实现元素的水平居中，以及通过设置元素的height和line-height相同来实现子元素的垂直居中

        .runningDuck {
            text-align: center;
            background-color: burlywood;
            height: 200px;
            line-height: 200px;
            width: 200px;
            color:white;
        }

实现效果

代码

云服务器 GPU云服务器数据统计的两种方法水平垂直居中实现垂直居中最优生成树的两种算法

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

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

案例 - 收藏集 - 掘金

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

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

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

huangjinnan 2019-08-29 12:54 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
CSS及布局

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

jaysun 2019-08-29 14:04 评论0 收藏0