CSS 定位居中

了解 5 种居中技巧如何通过一系列测试，以了解哪种技巧对变化最具弹性。

Adam Argyle

CSS 定位居中是一个臭名昭著的挑战，充满了笑话和嘲讽。2020 年的 CSS 已经成熟，现在我们可以发自内心地嘲笑这些笑话，而不是咬牙切齿地强颜欢笑。

如果您更喜欢视频，这里是此帖子的 YouTube 版本

挑战

居中有不同的类型。 从不同的用例、要居中的事物数量等等。为了演示“获胜”居中技巧背后的原理，我创建了“弹性擂台”。这是一系列针对每种居中策略的压力测试，以便在其中保持平衡，并让您观察它们的性能。最后，我揭晓得分最高的技巧以及“最有价值”的技巧。希望您能从中学习到新的居中技巧和解决方案。

弹性擂台

弹性擂台代表了我的信念，即居中策略应该能够适应国际布局、可变大小的视口、文本编辑和动态内容。这些原则帮助塑造了以下弹性测试，供居中技巧承受

  1. 挤压： 居中应能够处理宽度的变化
  2. 压扁： 居中应能够处理高度的变化
  3. 复制： 居中应能动态适应项目数量
  4. 编辑： 居中应能动态适应内容的长度和语言
  5. 流： 居中应与文档方向和书写模式无关

获胜的解决方案应通过在被挤压、压扁、复制、编辑以及切换到各种语言模式和方向时保持内容居中来证明其弹性。值得信赖且有弹性的中心，一个安全的中心。

图例

我提供了一些可视化颜色提示，以帮助您将一些元信息保留在上下文中

  • 粉色边框表示居中样式的归属
  • 灰色框是要居中项目的容器的背景
  • 每个子项都有白色背景颜色，以便您可以查看居中技术对子项框大小的任何影响（如果有）

5 位参赛者

5 种居中技巧进入弹性擂台，只有一种技巧将获得弹性皇冠 👸。

1. 内容居中

使用 VisBug 编辑和复制内容
  1. 挤压：很棒！
  2. 压扁：很棒！
  3. 复制：很棒！
  4. 编辑：很棒！
  5. 流：很棒！

要击败 display: grid 和 place-content 简写的简洁性将非常困难。由于它集中和对齐子项，因此对于旨在阅读的元素组来说，它是一种可靠的居中技术。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
优点
  • 即使在受限空间和溢出的情况下，内容也居中
  • 居中编辑和维护都在一个位置
  • Gap 保证了 n 个子项之间相等的间距
  • Grid 默认创建行
缺点
  • 最宽的子项 (max-content) 设置其余所有项的宽度。这将在 温和 Flex 中进行更多讨论。

非常适合 包含段落和标题的宏布局、原型，或通常需要清晰居中的事物。

2. 温和 Flex

  1. 挤压： 很棒！
  2. 压扁： 很棒！
  3. 复制： 很棒！
  4. 编辑： 很棒！
  5. 流： 很棒！

温和 Flex 是一种更真实的仅居中策略。它柔软而温和，因为与 place-content: center 不同，在居中期间不会更改任何子项的框大小。尽可能温和地堆叠、居中和间隔所有项目。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
优点
  • 仅处理对齐、方向和分布
  • 编辑和维护都在一个位置
  • Gap 保证了 n 个子项之间相等的间距
缺点
  • 代码行数最多

非常适合 宏布局和微布局。

3. 自动机器人

  1. 挤压： 很棒
  2. 压扁： 很棒
  3. 复制： 良好
  4. 编辑： 很棒
  5. 流： 很棒

容器设置为 flex，没有对齐样式，而直接子项使用自动边距进行样式设置。关于 margin: auto 在元素的所有侧面都起作用，有一些怀旧和美妙之处。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
优点
  • 有趣的小技巧
  • 快速而粗糙
缺点
  • 溢出时结果很尴尬
  • 依赖分布而不是 gap 意味着布局可能在子项接触侧面时发生
  • 被“推”到某个位置似乎不是最佳选择，并且可能导致子项的框大小发生变化

非常适合 居中图标或伪元素。

4. 蓬松中心

  1. 挤压： 糟糕
  2. 压扁： 糟糕
  3. 复制： 糟糕
  4. 编辑： 很棒！
  5. 流： 很棒！（只要您使用逻辑属性）

参赛者“蓬松中心”是迄今为止我们听起来最美味的竞争者，并且是唯一完全由元素/子项拥有的居中技术。看到我们单独的内部粉色边框了吗！？

.fluffy-center {
  padding: 10ch;
}
优点
  • 保护内容
  • 原子化
  • 每个测试都在秘密地包含这种居中策略
  • 单词空间是 gap
缺点
  • 无用的错觉
  • 容器和项目之间存在冲突，这很自然，因为每个项目都对其尺寸非常坚定

非常适合 以单词或短语为中心的居中、标签、药丸、按钮、芯片等。

5. 弹出 & 放置

  1. 挤压： 尚可
  2. 压扁： 尚可
  3. 复制： 糟糕
  4. 编辑： 良好
  5. 流： 良好

之所以“弹出”，是因为绝对定位将元素从正常流中弹出。名称的“放置”部分来自于我发现它最有用的地方：将其放置在其他东西之上。这是一种经典且方便的叠加层居中技术，它灵活且动态地适应内容大小。有时您只需要将 UI 放置在其他 UI 之上。

优点
  • 有用
  • 可靠
  • 当您需要它时，它非常宝贵
缺点
  • 带有负百分比值的代码
  • 需要 position: relative 来强制形成包含块
  • 过早且笨拙的换行
  • 在没有额外努力的情况下，每个包含块只能有一个

非常适合 模态框、Toast 消息和消息、堆叠和深度效果、弹出框。

获胜者

如果我身处荒岛，只能选择 1 种居中技术，那将是……

[击鼓声]

温和 Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

您总能在我的样式表中找到它，因为它对宏布局和微布局都很有用。它是一种全面的可靠解决方案，其结果符合我的期望。此外，由于我是一个内在尺寸调整迷，我倾向于逐渐采用这种解决方案。诚然，它需要输入很多代码，但它带来的好处超过了额外的代码。

MVP

蓬松中心

.fluffy-center {
  padding: 2ch;
}

蓬松中心是如此微小，以至于很容易被忽略为一种居中技术，但它是我居中策略的主要组成部分。它非常原子化，以至于有时我忘记了自己正在使用它。

结论

哪些类型的东西会破坏您的居中策略？还可以向弹性擂台中添加哪些其他挑战？我考虑过翻译和容器上的自动高度切换……还有什么！？

既然您已经知道我是如何做的，您会怎么做呢？！让我们使我们的方法多样化，并学习在 Web 上构建的所有方法。按照本文的 Codelab 创建您自己的居中示例，就像本文中的示例一样。 在 Twitter 上给我发推文 您的版本，我会将其添加到下面的 社区混音 部分。

社区混音