使用 将项目居中曾经是一件非常困难的事情。好吧，现在不再是了。现在有很多不同的方法可以做到这一点。这是一件好事，因为我们在不同的场景中可能需要不同的选择。在本视频中，我们将介绍三种我最喜欢的居中项目的方法，我们将使用定位，然后使用 Flexbox，最后，我们将使用我常用的 CSS 网格。 HTML 和 CSS 好吧，让我们开始吧。 https://youtu.be/XMH4c1xIZtE?embedable=true 这确实是一件很奇怪的事情，长期以来，将项目简单地放置在 Web 上的容器的中心是非常困难的。水平居中很容易，但垂直居中几乎是不可能的，直到最近几年。 使用 CSS 定位将项目居中 第一种方法使用 CSS 定位，可能是存在时间最长的方法，但随着新属性的出现，它已经发生了一些变化。让我们看一个例子。 这里我们有一个盒子，我们希望将其置于另一个带有红色边框的容器的中心。它是一个强大的元素，直接放置在 元素中，即我们在这里看到的红色框。 div 我们将为此方法使用绝对定位，因此让我们将其添加到我们的 元素中。 strong strong { position: absolute; } 现在，为了使其正常运行，我们的 需要为要定位的项目创建一个定位上下文。有许多不同的方法可以做到这一点，但本示例的最佳选择是使用相对定位。 div div { position: relative; } 现在我们可以将元素放置在 高度的 50% 和宽度的 50% 以上。要从顶部向下定位，我们可以使用新的逻辑属性 ，其值为百分之五十。并且，要从左侧定位，我们可以使用 ，其值相同为百分之五十。 div inset-block-start inset-inline-start strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 好吧，所以它并不完全居中，是吗？ 嗯，这是因为我们已将项目放置在 的中心，但其位置基于其左上角。我们现在需要做的是将项目向后移动其高度的 50%，并向后移动其宽度的 50% 以上。这会将其正确放置在中心。但是，我们怎样才能做到这一点呢？ div 这实际上很容易。我们可以使用新的 CSS 属性。第一个值将沿 x 轴平移。我们需要返回百分之五十，因此我们将添加负百分之五十的值。并且，第二个值沿 y 轴平移，我们将给它相同的负百分之五十的值。 translate strong { ... translate: -50% -50%; } 我们就这样吧。完美居中。 这是使用定位和翻译的最终工作示例： https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true 所以，这是我们可以做到的一种方法，但这不是我最喜欢的。 使用 Flexbox 将项目居中 如果可以的话，我更喜欢使用 Flexbox 而不是定位，因为它更容易，需要更少的代码行，没有定位上下文，而且老实说，它感觉像是一个更好、更现代的解决方案。让我们看一个例子。 好的，所以我们从同一点开始，我们有带有红色边框的外部 div，然后是内部的强元素。 我们首先将 div 制作为一个带有显示、flex 的 Flex 容器。然后我们可以使用 属性和 center 值将项目沿 x 轴对齐到中心。最后但并非最不重要的一点是，我们可以使用 属性和相同的center值沿y轴对齐。 justify-content align-items div { display: flex; justify-content: center; align-items: center; } 现在你已经看到了，该项目正确居中，这次只需要三行代码就可以到达那里。 这是使用 Flexbox 的最终工作示例： https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true 这很酷，我有时需要这样做，但我最喜欢的将项目定位在中心的方法是使用 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 网格的最终工作示例： https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true 结论 正如我之前所说，这肯定比以前容易得多。但所有这些技术仍然非常相关，并且可能因多种情况而需要，因此最好了解所有这些技术以防万一。我肯定更喜欢最少数量的 CSS 网格代码，如果这不起作用，那么下一个最好的方法是 Flexbox，如果这两者都不起作用，请尝试定位。 也发布 。 在这里

該音頻是用故事的原始語言製作的！

太長; 讀書

Making security fun one episode at a time

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

太長; 讀書

Brian Treese

About Author

標籤

Languages

这篇文章刊登在...

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

太長; 讀書

Brian Treese

About Author

標籤

Languages

这篇文章刊登在...

相關故事