你所不知道 ❌ CSS 居中

lewif 发布于2019-08-29 11:03 / 2674人阅读

前言

这次翻译一篇来自 Chris Coyier 的 《Centering in CSS: A Complete Guide》

居中是在CSS中经常被抱怨的问题之一。这个问题真的有这么难吗？事实上这个问题并没有那么复杂，它困难在于对于不同的情景，解决居中问题需要用到不一样的方法。

在这里，我们会一起建立思维导图来帮助大家来解决这个问题。

github 地址传送门

脑图

水平居中 行内元素

display属性为inline 或者 inline-* 行内元素?（例如：文本或者链接）

如果你需要居中的行内元素在块级元素中，你可以使用下面方法。

.center-children {
    text-align: center;
}

例子：传送门

单个 - 块级元素

如果需要使得块级元素居中，可以利用margin-left和margin-right。

.center-me {
    margin: 0 auto;
}

例子：传送门

注意：不能是一个浮动的块级元素哦~

多个 - 块级元素 - 同行居中

如果需要使得多个块级元素居中，这个时候用 magin可就不行啦，但是我们可以使用inline-block或者flexbox来实现居中。

inline-block

利用行内元素在块级元素中的居中方法，先让内部的块级元素变为行内元素，再对父级的块级元素使用居中。

.center-parent {
    text-align: center;
}
.center-parent .center-child{
    display: inline-block;
}

flexbox

.center-parent {
    display: flex;
    justify-content: center;
}

例子：传送门

多个 - 块级元素 - 同列居中

利用单个块级元素的居中方法,来实现多个块级元素的垂直居中。

.center-me {
    margin: 0 auto;
}

例子：传送门

垂直居中 单行 - 行内元素

display属性为inline 或者 inline-* 行内元素?（例如：文本或者链接）。可以利用padding或者line-height来实现。

padding

.text {
    padding-top: 30px;
    padding-bottom: 30px;
}

例子：传送门

line-height （值和height一样）

.text {
    height: 100px;
    line-height: 100px;
}

例子：传送门

多行 - 行内元素

对于多行行内元素，如果使用单行的方法，在换行之后，会出现错误。这个时候可以利用表格的vertical-align或者flexbox或者伪类来实现。

vertical-align

.center-table {
    display: table;
}
.center-table p {
    display: table-cell;
    vertical-align: middle;
}

例子：传送门

flexbox

.center-flexbox {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

例子：传送门

伪类

.center-parent {
    position: relative;
}
.center-parent::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.center-parent p {
    display: inline-block;
    vertical-align: middle;
}

例子：传送门

块级元素

元素高度知道

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; // 高度的一半
}

例子：传送门

元素高度不知道

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

例子：传送门

flexbox

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

例子：传送门

垂直水平居中

宽度和高度知道(利用垂直居中的块级元素高度知道)

.parent {
  position: relative;
}

.child {
  width: 200px;
  height: 100px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -50px 0 0 -100px;
}

例子：传送门

宽度和高度不知道(利用垂直居中的块级元素高度不知道)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

例子：传送门

flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

例子：传送门

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个点赞。

如果您想激励小二可以到 Github 给个 小星星。

如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop

服务器托管超融合服务器 html居中css 你所说说你所了解的人工智能知道

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

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

你所不知道的 CSS 负值技巧与细节

摘要：大家最为熟知的就是负，使用负的，可以用来实现类似多列等高布局垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢下文就再介绍一些负值有意思的使用场景。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-o...

FrozenMap 2019-08-30 15:44 评论0 收藏0
你所不知道的Python | 字符串格式化的演进之路

摘要：然而为了让我们更方便的使用这个常用功能，语言本身也在对字符串格式化方法进行迭代。不少使用过的小伙伴会知道其中的模板字符串，采用直接在字符串中内嵌变量的方式进行字符串格式化操作，在版本中也为我们带来了类似的功能字面量格式化字符串，简称。字符串格式化对于每个语言来说都是一个非常基础和常用的功能，学习Python的同学大概都知道可以用%语法来格式化字符串。然而为了让我们更方便的使用这个常用...

Blackjun 2019-07-30 16:50 评论0 收藏0
一些你所不知道的VS Code插件

摘要：摘要你所不知道的系列。允许你写入缩写代码并返回的相应标记，目前已经内置，所以不用配置了。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。摘要：你所不知道的系列。原文：提高 JavaScript 开发效率的高级 VSCode 扩展之二！作者：前端小智 Fundebug经授权转载，版权归原作者所有。作为一名业余爱好者、专业人员，甚至是每月只有一次编...

Near_Li 2019-05-22 12:00 评论0 收藏0
你所不了解的querySelector

摘要：而事实上，它会在的子代元素中匹配查询条件。它们并不会相对于任何特定的元素，甚至不会相对于调用的元素。伪选择器是相对当前作用域进行匹配的。它们是和的替代方法，存在父节点上。了解像这些坑很重要，因为从它们的行为中很难了解它们的实质特性。原文链接地址：http://blog.lxjwlt.com/front-...笔者整理笔记： 1.API介绍先看看MDN上怎么介绍这个API的：概述返回...

freewolf 2019-08-20 11:39 评论0 收藏0
你所不知道的同比和环比真正的区别

摘要：给百度百科给的环比定义为环比，统计学术语，是表示连续个统计周期比如连续两月内的量的变化比。二你所不知道的同比环比两种方式的核心区别判断两个数据到底是同比还是环比。 ...

liujs 2021-10-09 09:43 评论0 收藏0

发表评论

登陆后可评论

0条评论

lewif

男|高级讲师

我要关注我要私信

TA的文章

SSL端口映射测试

阅读 1176·2021-11-22 15:11
那些年我用过的SAP IDE

阅读 2729·2019-08-30 14:16
模块化高效开发微信小程序—汽车试驾

阅读 2645·2019-08-29 15:21
Codepen 每日精选（2018-4-26）

阅读 2823·2019-08-29 15:11
前端调试利器 - Charles

阅读 2361·2019-08-29 13:19
classList属性

阅读 2876·2019-08-29 12:25
JavaScript系列——JavaScript同步、异步、回调执行顺序之经典闭包setTimeou

阅读 299·2019-08-29 12:21
你所不知道 ❌ CSS 居中

阅读 2675·2019-08-29 11:03

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

你所不知道 ❌ CSS 居中

github 地址 传送门

display属性为inline 或者 inline-* 行内元素?（例如：文本或者链接）

例子：传送门

如果需要使得块级元素居中，可以利用margin-left和margin-right。

例子：传送门

注意：不能是一个浮动的块级元素哦~

如果需要使得多个块级元素居中，这个时候用 magin可就不行啦，但是我们可以使用inline-block或者flexbox来实现居中。

inline-block

flexbox

例子：传送门

利用单个块级元素的居中方法,来实现多个块级元素的垂直居中。

例子：传送门

display属性为inline 或者 inline-* 行内元素?（例如：文本或者链接）。可以利用padding或者line-height来实现。

padding

例子：传送门

line-height （值和height一样）

例子：传送门

对于多行行内元素，如果使用单行的方法，在换行之后，会出现错误。这个时候可以利用表格的vertical-align或者flexbox或者伪类来实现。

vertical-align

例子：传送门

flexbox

例子：传送门

伪类

例子：传送门

元素高度知道

例子：传送门

元素高度不知道

例子：传送门

flexbox

例子：传送门

宽度和高度知道(利用垂直居中的块级元素高度知道)

例子：传送门

宽度和高度不知道(利用垂直居中的块级元素高度不知道)

例子：传送门

flexbox

例子：传送门

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动

github 地址传送门