8 种使用 CSS 使元素居中的方法

即使对于经验丰富的开发者来说，CSS 中的元素居中有时也会令人头疼。情况千差万别，解决方案也多种多样。有时，某种方法优于其他方法，而有时，这仅仅取决于个人偏好。为了做出正确的选择，我们需要了解 CSS 的功能以及每种方法的优缺点。本文汇总了其中 8 种方法，让我们一起来详细了解一下。

1. 弹性

我认为这是最简单的解决方案。你只需要给父元素添加三个属性，子元素就会在其内部居中显示。第一个align-items属性使子元素垂直对齐，第二个属性使子元素justify-content水平对齐。

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

几乎所有情况下都可以使用此解决方案。缺点？IE10 及更低版本不支持 justify-content 和 align-items 属性。

过去三年里，我从未遇到过需要支持 IE10 或更低版本的情况，所以您很可能也不用担心这个问题。这使得灵活解决方案非常适合这项工作。

2. 网格

网格布局方案与弹性布局方案非常相似，甚至代码也几乎相同。

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

它的行为与 Flex 布局方案相同，只是浏览器兼容性不同。如果justify-content某些align-items功能在 IE11 中可以用于 Flex 布局，那么它们在网格布局中则无法正常工作。

如果你完全不需要兼容 IE 浏览器，并且更喜欢使用网格布局而不是弹性布局，那么这可能是一个不错的解决方案。

3. 位置

如果父元素设置了固定高度或最小高度，那么使用 `position` 属性可能是一个不错的解决方案。将子元素的 `position`position属性设置为 `absolute` 将会使其脱离流。这意味着子元素的高度不会影响父元素的高度。但需要注意的是，这种方法不适用于对齐长度可能不同的文本框。以下代码可以对子元素进行水平和垂直对齐：

.parent {
  position: relative;
  /* add some height to the parent element, for example: */
  min-height: 200px;
}

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

如果您只想垂直对齐某个元素，请对子元素使用以下样式：

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

或者用这个方法水平对齐：

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

此解决方案中使用的所有属性在所有浏览器上都得到了很好的支持。请注意，transformIE8 及更低版本不支持该属性，但您很可能无需担心。

4. 边际

使用边距来水平对齐块级元素也是一种非常流行的方法。它通常用于对齐容器等布局元素，但也适用于任何块级元素。代码非常简单：

.child {
  margin: 0 auto;
}

这种方法可以让你水平对齐元素。要同时实现垂直对齐，你可以使用其他方法，例如使用内边距（padding）。

5. 衬垫

你可以使用内边距（padding）来使元素垂直和水平居中。虽然内边距非常简单，但它很少是使元素居中的理想解决方案。原因在于，它依赖于子元素和父元素的固定高度，而这些高度通常无法精确设置。要使用内边距使元素居中，你需要将相等的内边距值分配给元素的各个边：

.parent {
  height: 300px;
  width: 400px;
}

.child {
  height: 50px;
  padding: calc((300px - 50px) / 2) calc((400px - 50px) /2);
}

身高加上垂直间距之和决定了孩子的垂直位置。如果该总和等于父母的身高，则孩子居中。

.parent {
  height: 300px;
}

.child {
  height: 50px;
  padding: calc((300px - 50px) / 2) 0;
}

水平位置的规则也相同。如果宽度和宽度之和等于父元素的宽度，则子元素居中显示。

.parent {
  width: 400px;
}

.child {
  height: 50px;
  padding: 0 calc((400px - 50px) / 2);
}

6. 文本对齐

`text-align` 属性可用于对齐任何行内元素。这种方法非常适合对齐文本、图像、按钮和链接等元素。许多行内元素的默认显示属性设置为 `inline-block`，但您也可以更改其显示属性。

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

这是一个非常简单的解决方案，但它只能使元素水平对齐。要使其垂直对齐，最好使用 vertical-align 属性。

7. 垂直对齐

vertical-align 属性是我最难理解的属性。它控制同一行中相邻元素的对齐方式。要使该属性生效，元素必须设置为 inline 或 inline-block。此方案的用例是将图标与文本对齐。

.parent > .child {
  display: inline-block;
  vertical-align: middle;
}

这样只会使元素与最高元素的行高对齐。如果要使元素相对于父元素的高度垂直对齐，可以这样做：

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

.child {
  display: inline-block;
}

顾名思义，该属性仅允许您将元素垂直居中。您还可以使用父元素的 text-align 属性来使其水平居中。

8. 行高

最后，你还可以使用 `line-height` 属性来对齐元素。要实现这一点，子元素必须是 `inline` 或 `inline-block` 元素。元素始终在其行高范围内垂直居中。这意味着，当行高与父元素的高度相同时，子元素在其内部垂直居中。

.parent {
  height: 100px;
}

.child {
  display: inline-block;
  line-height: 100px;
}

行高设置只能使元素垂直居中。要水平居中，可以使用 `text-align` 属性。该属性最适合用于图标、按钮或链接等元素。由于行高会影响元素的显示，因此请将其用于始终位于同一行的元素。

概括

正如我们所见，有很多方法可以使元素居中，我相信肯定还有其他方法。我通常使用 flex 和 position 这两种方法，当然有时也会用到其他方法。你有什么常用的方法吗？请告诉我！