1. 1. 水平居中
    1. 1.1. 居中元素是否是inline 或者 inline-*(好比文本或者链接)
    2. 1.2. 是否是块级元素
    3. 1.3. 居中多个块级元素?
  2. 2. 垂直居中
    1. 2.1. 是否是inline或者inline-*(好比文本或者链接)?
      1. 2.1.1. 单行
      2. 2.1.2. 多行
    2. 2.2. 是否是块级元素?
      1. 2.2.1. 元素高度确定
      2. 2.2.2. 元素高度无法确定
      3. 2.2.3. 采用flexbox
  3. 3. 垂直居中 + 水平居中
    1. 3.1. 宽度和高度固定
    2. 3.2. 宽度或高度不确定
    3. 3.3. 采用flexbox
  4. 4. 总结
Table of Contents ▼

[译]CSS居中完全指南

原文地址:https://css-tricks.com/centering-css-complete-guide/

居中是CSS中的一大难题。经常会听见有人抱怨,为何CSS居中如此困难。在我看来,其实并非居中困难,难的是我们如何根据不同情况选择合适的居中方式。

在这,我们建立一个决策树,帮助大家更容易的掌握CSS居中的方法。

水平居中

居中元素是否是inline 或者 inline-*(好比文本或者链接)

通过text-align将块级元素中的行内元素居中:

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

这样可以便可以将displayinline,inline-block,inline-table,inline-flex的元素居中。

关于text-aligntext-align会影响有一个元素中的文本对其方式,需要注意的是text-align是应用于块级元素,改变块级元素中内容的对其方式,而且text-allign是拥有继承性的,vertical-align是没有继承性的(vertical-align应用于行内元素和表单元素,还要继承干嘛`)。(voya注)

是否是块级元素

设置margin-leftmargin-rightauto(并且width给定值,否则宽度将充满父元素,居中也就无意义了)。代码如下:

.center-me{
  margin: 0 auto;
}

这种方法对要居中的元素和其父元素的宽度都没有要求。(译者注,明白水平格式化margin-left,margin-right以及width的关系,如果还迷糊,赶紧看《CSS权威指南》第七章,会帮你解决很多奇葩问题)

需要注意的是,通过float是不能实现居中的。但是,这有一个利用浮动居中的小技巧

居中多个块级元素?

如果在一行中需要对多个块级元素居中,可以通过设置display来实现。下边分别提供了将display设置为inline-blockflexbox的两种例子。

如果居中的这些块元素是从上让下排列而且放置在同一行,那么,auto margin(left/right)仍然适用:

垂直居中

垂直居中相对会麻烦一些。

是否是inline或者inline-*(好比文本或者链接)?

单行

设置相同的上下内边距可以是inline/text元素居中。

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

当因为其他某些因素,不能采用padding,也没有换行的时候,可以通过设置line-height等于height达到居中效果。

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行

对于多行文本垂直居中,同样可以采用设置相同的上下内边距;
当无法通过设置padding达到效果时,可以按照table cell格式布局需要居中的文本元素。这种情况下,采用vartical-align处理居中与在单行中有所不同。(vertical-align详解

有时候我们不希望采用表格布局的方法,那么可能可以可以采用flexbox。在flex-parent居中flex-child非常简单。

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

注意,只有当父元素设定了高度(指定px或者百分数等等),子元素才能相应居中。

如果以上方法都不适用,还有“幽灵元素”这一招:为父元素创建一个高度为100%伪元素,设置文本根据这个伪元素居中。

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

是否是块级元素?

元素高度确定

在页面布局中,诸多原因让我们无法确定元素的高度;比如说,随着宽度变化,文本回流重绘将改变容器高度;字体样式改变、文本内容的增减以及改变比例固定元素(例如图片)的尺寸等等都会导致高度的变化。

但是!万一真的不幸确定高度哈哈哈,那么可以采用下面的方法:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

元素高度无法确定

在未知元素高度的情况下,依然可以做到垂直居中:将元素下移其父元素高度的一半,然后向上移动其自身一半的高度。

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

采用flexbox

正如我们期待的,在flexbox中居中将是非常容易的:

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

垂直居中 + 水平居中

你可以尝试将上诉方法进行任意的组合,从而达到理想的居中效果。大致可以分为以下三种情况:

宽度和高度固定

利用绝对定位,水平和垂直方向进行50%(父元素的50%)的偏移,然后设置水平和垂直方向上50%的负边距,即可跨浏览器实现居中。

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

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

  margin: -70px 0 0 -170px;
}

宽度或高度不确定

在无法确定元素宽度或者高度的情况下,利用transform属性,设置水平和垂直方向移动-50%(translate(-50%, -50%);)(translate的偏移值根据元素的实际宽度和高度进行计算)。

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

采用flexbox

flexbox进行居中,需要利用到两个属性:

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

总结

相信你现在已经可以游刃有余地操作居中了。