3 种用于居中项目的当代 CSS 技术

使用HTML 和 CSS将项目居中曾经是一件非常困难的事情。好吧，现在不再是了。现在有很多不同的方法可以做到这一点。这是一件好事，因为我们在不同的场景中可能需要不同的选择。在本视频中，我们将介绍三种我最喜欢的居中项目的方法，我们将使用定位，然后使用 Flexbox，最后，我们将使用我常用的 CSS 网格。

好吧，让我们开始吧。

这确实是一件很奇怪的事情，长期以来，将项目简单地放置在 Web 上的容器的中心是非常困难的。水平居中很容易，但垂直居中几乎是不可能的，直到最近几年。

使用 CSS 定位将项目居中

第一种方法使用 CSS 定位，可能是存在时间最长的方法，但随着新属性的出现，它已经发生了一些变化。让我们看一个例子。

这里我们有一个盒子，我们希望将其置于另一个带有红色边框的容器的中心。它是一个强大的元素，直接放置在div元素中，即我们在这里看到的红色框。

我们将为此方法使用绝对定位，因此让我们将其添加到我们的strong元素中。

 strong { position: absolute; }

现在，为了使其正常运行，我们的div需要为要定位的项目创建一个定位上下文。有许多不同的方法可以做到这一点，但本示例的最佳选择是使用相对定位。

 div { position: relative; }

现在我们可以将元素放置在div高度的 50% 和宽度的 50% 以上。要从顶部向下定位，我们可以使用新的逻辑属性inset-block-start ，其值为百分之五十。并且，要从左侧定位，我们可以使用inset-inline-start ，其值相同为百分之五十。

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

好吧，所以它并不完全居中，是吗？

嗯，这是因为我们已将项目放置在div的中心，但其位置基于其左上角。我们现在需要做的是将项目向后移动其高度的 50%，并向后移动其宽度的 50% 以上。这会将其正确放置在中心。但是，我们怎样才能做到这一点呢？

这实际上很容易。我们可以使用新的 CSS translate属性。第一个值将沿 x 轴平移。我们需要返回百分之五十，因此我们将添加负百分之五十的值。并且，第二个值沿 y 轴平移，我们将给它相同的负百分之五十的值。

 strong { ... translate: -50% -50%; } 

我们就这样吧。完美居中。

这是使用定位和翻译的最终工作示例：

所以，这是我们可以做到的一种方法，但这不是我最喜欢的。

使用 Flexbox 将项目居中

如果可以的话，我更喜欢使用 Flexbox 而不是定位，因为它更容易，需要更少的代码行，没有定位上下文，而且老实说，它感觉像是一个更好、更现代的解决方案。让我们看一个例子。

好的，所以我们从同一点开始，我们有带有红色边框的外部 div，然后是内部的强元素。

我们首先将 div 制作为一个带有显示、flex 的 Flex 容器。然后我们可以使用justify-content属性和 center 值将项目沿 x 轴对齐到中心。最后但并非最不重要的一点是，我们可以使用align-items属性和相同的center值沿y轴对齐。

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

现在你已经看到了，该项目正确居中，这次只需要三行代码就可以到达那里。

这是使用 Flexbox 的最终工作示例：

这很酷，我有时需要这样做，但我最喜欢的将项目定位在中心的方法是使用 CSS 网格。再说一次，我这样做的原因是因为它比flex更容易，并且需要的代码更少。

使用网格将项目居中

好的，与红色框和内部项目相同的起点。

这次我们将使 div 成为一个display值为grid的网格容器。现在最酷的是，如果我们愿意，我们可以使用与弹性盒示例相同的两个属性。我们可以添加justify-content: center和align-items: center 。它的工作原理完全相同。

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

有点有趣，但这就是网格的工作方式，它可以使用与 Flexbox 相同的框对齐属性。但是，如果我们这样处理的话，使用网格就真的没有任何优势了，对吗？

那么，我们可以做的是，删除这些对齐属性，并用 place-items 属性替换它们。并且，我们可以给这个属性一个中心值。

 div { display: grid; place-items: center; } 

就这样，现在我们已经把它削减到只有两行 CSS 了。

这是使用 CSS 网格的最终工作示例：

结论

正如我之前所说，这肯定比以前容易得多。但所有这些技术仍然非常相关，并且可能因多种情况而需要，因此最好了解所有这些技术以防万一。我肯定更喜欢最少数量的 CSS 网格代码，如果这不起作用，那么下一个最好的方法是 Flexbox，如果这两者都不起作用，请尝试定位。