使用 CSS 垂直和水平居中

2025-05-24

使用 CSS 垂直和水平居中

本文将展示使用 HTML+CSS 实现垂直和水平居中的五种不同方法，按时间顺序介绍：从过去的做法（我们现在应该避免）到现在的现代内容居中方法。

如果您希望观看本文的视频版本，请访问我的 YouTube 频道：

可能还有其他居中方法（例如，使用margin: auto），但为了简单起见并提供一些关于事物发展的背景信息，我将仅关注以下五种方法：

  1. 使用表格
  2. 使用负边距
  3. 使用翻译
  4. 使用 FlexBox
  5. 使用网格

在我们的面试过程中，我要求应聘者将页面上的元素垂直和水平居中，但大多数人都无法给出正确的答案。希望本文能对此有所帮助。

使用表格

注意：不要使用此方法。

一开始，还没有简单的方法让元素居中，所以我们用表格来实现垂直和水平居中。当然，这种方法很糟糕，但在当时这是唯一的选择。

想法是添加一个只有一个单元格的表格，并将该单元格垂直和水平居中：

<table>
  <tr>
    <td>
      Centered content
    </td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode 
table {
  width: 100%;
  height: 100%;
}

td {
  vertical-align: center;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

这种方法是错误的，原因有很多：

  • 它太冗长：它需要太多（额外的）元素来实现内容居中。
  • 语义 HTML 的错误使用：元素的使用取决于其外观，而不是其含义。
  • 它是不可访问的：与上面的观点相关，它使用表格进行布局而不是显示数据。

出于这些原因，这种方法并不好。所以我们停止使用它，并转向了更好的方法。

使用负边距

注意：避免使用此方法。

然后，我们将元素以绝对形式定位到容器垂直和水平方向的 50%，然后分别在顶部和左侧应用高度和宽度一半的负边距：

<div>Centered content</div>
Enter fullscreen mode Exit fullscreen mode 
div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  line-height: 60px;
  margin-left: -100px;
  margin-top: -30px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

这种方法比前一种方法要好，但也存在一些缺点：

  • 需要一些前期工作：我们需要预先知道元素的大小以设置适当的负边距。
  • 可能会影响布局：更改边距可能会影响周围元素的位置，line-height可能会导致多行问题等。
  • 仍然太冗长：此方法需要许多 CSS 属性才能正确居中内容。

有些人可能会说：“你可以使用 CSS 变量和calc函数来避免这些问题”，现在看来，他们说得没错。但在当时，CSS 自定义属性还没有那么多浏览器支持，而且对 CSS 的支持也calc略胜一筹。

然而，我们仍然需要指定宽度和高度，这并不总是可行的。所以我们最终会在代码中得到“魔法数字”。

使用翻译

该方法与上一个方法类似。其思路是将元素绝对定位到顶部和左侧的 50%，然后使用 将其平移一半大小transform：

<div>Centered content</div>
Enter fullscreen mode Exit fullscreen mode 
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

平移的百分比是相对于元素大小的。因此，平移 -50% 表示将其大小的一半分别向左和向上平移。无需知道元素的大小。

一段时间以来，这是一种常见的水平和垂直居中元素的方法。我喜欢它，因为它很简单（只需四个 CSS 属性）。此外，它不依赖于任何其他元素（尽管你可能需要容器中的位置）或其他 HTML 元素。

这种方法的一个缺点是，通过使用position: absolute，我们将元素移出了页面的正常流。结合 transform ，这可能会导致元素与页面上的其他内容重叠。

使用 FlexBox

以前的方法已经管用很久了，现在仍然很方便。但后来，CSS 中出现了新的内容布局方式：Flexbox 和 Grid。它们为内容的定位和对齐（不仅仅是居中）提供了无限的可能性。

使用 FlexBox（和 Grid）居中的有趣之处在于样式位于容器中而不是元素本身中：

<div>Centered content</div>
Enter fullscreen mode Exit fullscreen mode 
div {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

这可以被视为一种更“自然”的内容布局方法。它可以与一个或多个元素（弹性容器的子元素）协同工作，并提供比以前方法更多的选项。

这种方法在居中多行内容时可能会出现一个问题。文本默认仍会左对齐，并且可能不会给人居中的印象。这是因为居中的是元素本身，而不是其内容。在某些情况下，你可能需要执行此操作text-align: center才能使所有内容完全居中。

使用网格

使用网格，我们可以应用与 FlexBox 相同的属性，只需将 from 的值更改为，display它就会以相同的方式工作：flexgrid

<div>Centered content</div>
Enter fullscreen mode Exit fullscreen mode 
div {
  display: grid;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

我们的想法是有一个带有单个单元格和绝对中心的网格（有点像我们对表格所做的那样，但这次具有适当的语义并且不涉及额外的 HTML 元素。）

然后，我们可以将align-items和justify-content组合成一个属性：place-items，让事情变得稍微简短一些：

<div>Centered content</div>
Enter fullscreen mode Exit fullscreen mode 
div {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

是的，只需两行 CSS 代码就能帮你实现内容垂直和水平居中。它不像某些百叶窗的机制那么复杂 ;)

当容器内包含多个元素时，Grid和FlexBox布局方法可能会带来一些挑战。在这种情况下，一个简单的解决方案是将所有内容包裹在额外的标签中。但通常情况下，这样做是没有必要的。

结论

掌握 CSS 居中技巧是一项实用且宝贵的技能。在你的 Web 开发生涯中，你总有一天会用到它。而且，正如我们在本文中所见，它其实并不复杂。

您可以使用任何您想要的方法进行水平和垂直居中（但请避免使用表格进行布局。）我通常transform: translate(-50%, -50%)根据情况使用（#3）和 FlexBox/Grid（#4 或 #5）。

我喜欢这种翻译方案，元素只“依赖于自身”，样式会应用到居中的组件上（尽管父级组件可能需要设置position）。而在 FlexBox/Grid 方法中，样式会应用到父级组件上，元素不会受到定位的影响。这种方式很美观，也更自然。

面试技巧：如果面试时（或工作中）要求你将一个元素水平和垂直居中，但应用 FlexBox/Grid 方法后，它只能水平居中。请检查父元素是否有高度 ;)

文章来源：https://dev.to/alvaromontoro/centering-vertically-and-horizo​​ntally-with-css-3hbk
Devto 翻译
PREV
使用 HTML 和 CSS 创建标签云
NEXT
使用 HTML 和 CSS 构建交互式登录表单