本文翻译自《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旨在让我们在沿主轴分布一组元素时拥有强大的控制力。它提供了一些非常强大的居中工具！