长期以来，在其父元素中居中定位一个元素一直是一项令人惊讶地棘手的任务。随着CSS的发展，我们获得了越来越多的工具来解决这个问题。如今，我们在中心化策略上拥有丰富的选择！本文旨在帮助您理解不同方法之间的权衡，并提供一套适用于各种场景的中心化策略。
一、自动边距法：古老而经典
要实现水平居中，我们可以使用特殊的auto值设置外边距：
.element {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
首先，我们需要限制元素的宽度；默认情况下，流式布局中的元素会沿水平方向扩展以填充可用空间，对于全宽元素来说很难居中。“fit-content”是一个神奇的值，它使“width”的行为类似于“height”，从而使元素的大小由其内容决定。
为什么使用max-width而不是width？目标是阻止元素沿水平方向扩展，限制其最大尺寸。如果使用width，则会将其锁定在固定尺寸，当容器非常窄时会导致元素溢出。通过拖动“Container Width”滑块到最左边，可以看到元素随其容器一起缩小。
为了简化代码，可以使用更现代的方法：
.element {
max-width: fit-content;
margin-inline: auto;
}
margin-inline同时设置了margin-left和margin-right为相同的值（auto），在所有主要浏览器中已有多年良好支持。
逻辑属性的力量
margin-inline不仅是margin-left和margin-right的便捷简写，它是逻辑属性集合的一部分，旨在使网页国际化更加容易。在英语中，字符从左到右水平排列，组成单词和句子，进而形成“块”（段落、标题、列表等）。块沿垂直方向堆叠，自上而下。这可以视为英文网站的方向。
然而，这不是普适的。例如，阿拉伯语和希伯来语是从右到左书写的，而中文历史上是竖向书写，字符从上到下，块从左到右排列。
逻辑属性的主要目的是创建一个超越这些差异的抽象层。无需分别为从左到右和从右到左的语言设置margin-left和margin-right，而是可以使用margin-inline-start。根据页面的语言，边距会自动应用到正确的一侧。
即使这种方法已经存在很久，但我在日常工作中仍经常使用它，特别是当需要居中单个子元素而不影响其他兄弟元素时（例如，博客文章中的图像）。
二、弹性盒布局：强大的居中工具
Flexbox为我们提供了大量控制，以便沿着主轴分布一组项目。它提供了强大的居中功能！
让我们先从水平和垂直居中一个单一元素开始：
.container {
display: flex;
justify-content: center;
align-items: center;
}
Flexbox居中的妙处在于，即使元素超出其容器，它也能工作！尝试减小宽度/高度，注意元素如何对称性地溢出。
对于多个子元素，我们可以通过flex-direction属性控制它们的堆叠方式：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
}
/* Flex Direction 可选值：
row
column
row-reverse
column-reverse
*/
在这篇教程中探讨的所有居中模式中，我可能最常使用的就是这一种。它是一个多才多艺的通用选项。
三、定位布局：视口中的中心点
有时我们需要将元素相对于视口而非其父容器居中，如对话框、提示或GDPR横幅。这时，定位布局就派上用场了。
.element {
position: fixed;
inset: 0px;