使用HTML 和 CSS将项目居中曾经是一件非常困难的事情。好吧,现在不再是了。现在有很多不同的方法可以做到这一点。这是一件好事,因为我们在不同的场景中可能需要不同的选择。在本视频中,我们将介绍三种我最喜欢的居中项目的方法,我们将使用定位,然后使用 Flexbox,最后,我们将使用我常用的 CSS 网格。
好吧,让我们开始吧。
这确实是一件很奇怪的事情,长期以来,将项目简单地放置在 Web 上的容器的中心是非常困难的。水平居中很容易,但垂直居中几乎是不可能的,直到最近几年。
第一种方法使用 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 而不是定位,因为它更容易,需要更少的代码行,没有定位上下文,而且老实说,它感觉像是一个更好、更现代的解决方案。让我们看一个例子。
好的,所以我们从同一点开始,我们有带有红色边框的外部 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,如果这两者都不起作用,请尝试定位。
也发布在这里。