paint-brush
3 种用于居中项目的当代 CSS 技术经过@briantreese
323 讀數
323 讀數

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

经过 Brian Treese5m2024/02/27
Read on Terminal Reader

太長; 讀書

探索在 CSS 中居中元素的三种有效方法:定位、Flexbox 和 CSS 网格。从使用绝对定位的传统方法到 Flexbox 和 CSS Grid 的现代简单性,了解如何用最少的代码实现完美居中。无论您是初学者还是经验丰富的开发人员,这些技术都可以为您的网页布局需求提供通用的解决方案。
featured image - 3 种用于居中项目的当代 CSS 技术
Brian Treese HackerNoon profile picture


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


好吧,让我们开始吧。


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


使用 CSS 定位将项目居中

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


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

使用 CSS 定位使项目居中之前的演示


我们将为此方法使用绝对定位,因此让我们将其添加到我们的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%; } 


CSS 定位之后但转换为中心项目之前的演示


好吧,所以它并不完全居中,是吗?


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


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


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


CSS 定位并转换为中心项目后的演示


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


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


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

使用 Flexbox 将项目居中

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


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


使用 CSS Flexbox 居中项目之前的演示


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


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


CSS Flexbox 将项目居中后的演示


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


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


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

使用网格将项目居中

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


使用 CSS Flexbox 居中项目之前的演示


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


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


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


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


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


CSS Grid 将项目居中后的演示


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


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


结论

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


也发布在这里