本文翻译自《How To Center a Div》。
长期以来,将元素置于其父元素内是一件非常棘手的事情。随着CSS的发展,我们获得了越来越多的工具来解决这个问题。如今,我们有很多选择!
我决定创建本教程来帮助你了解不同方法之间的权衡,并为你提供一系列可用于处理各种场景的居中策略。
老实说,这比我最初想象的要有趣得多。即使你已经使用CSS一段时间了,我敢打赌你至少会学到1种新策略!
使用自动边距(auto margin)来居中
我们将要介绍的第一个策略是最古老的策略之一。如果我们想将元素水平居中,我们可以使用设置为特殊值auto
的边距(margin)来实现:
.element {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
(译者注:案例请看原文)
首先,我们需要限制元素的宽度;默认情况下,流式布局(Flow layout)中的元素将水平扩展其宽度以填充可用空间,我们无法真正将全宽的东西居中。
我可以用一个固定值(例如200px)来限制宽度,但在上述场景下,我真正想要的是让元素收缩到其内容的周围。 fit-content
是一个神奇的值,它就是用来做这个的。本质上,它使“宽度”表现得像“高度”,这样元素的大小就由其内容决定了。
为什么我要使用max-width
而不是width
?因为我的目标是阻止元素水平扩展。我想限制其最大尺寸。如果我改用width
,它会将其宽度锁定为其内容的宽度,当容器非常窄时,这个元素就会溢出。使用max-width
,如果将改变“容器宽度”的滑块一直拖到最左侧,你会看到该元素的宽度随其容器一起缩小。
现在我们的元素受到限制,我们可以用自动边距将其居中。 我喜欢将自动边距想象成“饥饿的河马”。每个自动边距都会尝试吞噬尽可能多的空间。例如,看看如果我们只设置margin-left: auto
会发生什么:
.element {
max-width: fit-content;
margin-left: auto;
}
译者注:案例请看原文)
当margin-left
是唯一具有自动边距的一侧时,所有额外空间都会作为边距应用于该侧。当我们同时设置margin-left: auto
和margin-right: auto
时,两只河马会各自占用相同大小的空间。这就会将元素强制置于中间。
另外:我一直使用margin-left
和margin-right
,因为我对它们很熟悉,但有一种更好、更现代的方法可以做到这一点:
.element {
max-width: fit-content;
margin-inline: auto;
}
(译者注:案例请看原文)
margin-inline
将把margin-left
和margin-right
设置为相同的值(例如上例的auto
)。它具有非常好的浏览器支持,几年前就已登陆所有主流浏览器。
尽管这种居中方法已经存在很久了,但我仍然发现自己经常使用它!当我们想将单个子元素居中而不影响其任何兄弟元素时,这种方法特别有用(例如,博客文章中段落之间的图像)。
逻辑属性(logical properties)
margin-inline
不仅仅是margin-left
+ margin-right
的便捷简写。它是逻辑属性集合的一部分,旨在使网络国际化变得更加容易。
在英语中,字符从左到右水平书写。这些字符组成单词和句子,并组装成“块”(段落、标题、列表等)。块从上到下垂直堆叠。我们可以将此视为英语网站的内容方向。
但这并不是通用的!有些语言,如阿拉伯语和希伯来语,是从右到左书写的。其他语言,如中文,历史上是垂直书写的,字符从上到下,块从一边到另一边。
逻辑属性的主要目标是创建一个超越这些差异的抽象。我们可以使用margin-inline-start
,而不是为从左到右的语言设置margin-left
并将其翻转为margin-right
以适应从右到左的语言。margin-inline-start
会根据页面的语言,边距将自动应用于正确的一侧。
使用弹性盒(Flexbox)布局来居中
Flexbox旨在让我们在沿主轴分布一组元素时拥有强大的控制力。它提供了一些非常强大的居中工具!