你所不知道的 CSS - 居中

这次翻译一篇来自 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;}

例子：传送门

关键字：css, 居中, flexbox, flex

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！