在 CSS 中居中

跟随 5 种居中技术，看它们如何通过一系列测试，找出哪种技术最能适应变化。

Adam Argyle

在 CSS 中居中是一个出了名的难题，充满了笑话和嘲讽。2020 CSS 已经成熟，现在我们可以坦然地笑对这些笑话，而不是咬牙切齿。

如果您更喜欢视频，可以观看此博文的 YouTube 版本：

挑战

居中方式有多种。因为用例不同、要居中的内容数量不同，等等。为了展示“胜出”的居中技术背后的原理，我创建了 Resilience Ringer。这是一系列压力测试，旨在让每种居中策略在其中达到平衡，并让您观察其性能。 最后，我会揭晓得分最高的技术，以及“最具价值”的技术。 希望您能从中收获新的居中技巧和解决方案。

抗压能力

Resilience Ringer 代表了我的信念，即居中策略应该能够灵活适应国际化布局、不同尺寸的视口、文本编辑和动态内容。这些原则有助于为居中技术制定以下弹性测试，以确保其能够经受住考验：

  1. 挤压： 居中应能够处理宽度变化
  2. Squashed: centering should be able to handle changes to height
  3. 重复：居中应根据内容数量动态调整
  4. 修改：居中应根据内容的长度和语言动态调整
  5. 流：居中应与文档方向和书写模式无关

获胜的解决方案应展现其弹性，在被挤压、压扁、复制、编辑以及切换到各种语言模式和方向时，内容仍能保持在中心位置。一个值得信赖、具有韧性且安全的中心。

Legend

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

  • 粉色边框表示居中样式的归属
  • 灰色框是容器的背景，容器中的内容会居中显示
  • 每个子元素都具有白色背景色，以便您查看居中技术对子元素框大小的影响（如果有）

5 位参赛者

5 种专注技巧进入抗逆力擂台，只有一种能获得抗逆力皇冠 👸。

1. 内容中心

使用 VisBug 修改和复制内容
  1. Squish：太棒了！
  2. Squash：太棒了！
  3. 复制：太棒了！
  4. 修改：太棒了！
  5. 心流：太棒了！

display: grid 和 place-content 简写形式的简洁性很难超越。由于它会集中并对齐子元素，因此对于要读取的元素组，这是一种可靠的居中技术。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
优点
  • 即使在空间受限和溢出的情况下，内容也会居中
  • 集中编辑和维护，一站式搞定
  • Gap 可确保 n 个子项之间的间距相等
  • 默认情况下，网格会创建行
缺点
  • 最宽的子项 (max-content) 会设置所有其他子项的宽度。Gentle Flex 中将对此进行详细讨论。

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

2. 柔和 Flex

  1. Squish：太棒了！
  2. 壁球：太棒了！
  3. 重复：太棒了！
  4. 编辑：太棒了！
  5. Flow：太棒了！

Gentle Flex 是一种更纯粹的仅居中策略。它柔和而温和，因为与 place-content: center 不同，在居中过程中，子级框的大小不会发生变化。所有内容都尽可能温和地堆叠、居中和留出间距。

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

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

3. Autobot

  1. 挤压：极佳
  2. 壁球：极佳
  3. 重复：罚款
  4. 修改：太棒了
  5. 心流：极佳

容器设置为 flex，没有对齐样式，而直接子元素则使用自动外边距进行样式设置。在元素的所有侧面进行操作，margin: auto会让人感到怀旧和美妙。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
优点
  • 趣味技巧
  • 快速而粗糙
缺点
  • 溢出时结果不理想
  • 依赖分布而非间距意味着布局可能会出现子项触及边缘的情况
  • 被“推”到某个位置似乎不是最佳选择，并且可能会导致子级框大小发生变化

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

4. Fluffy Center

  1. 挤压：差
  2. 壁球：差
  3. 重复：不佳
  4. 编辑：太棒了！
  5. Flow：太棒了！（只要您使用逻辑属性）

“fluffy center”是目前为止听起来最美味的居中技术，也是唯一一种完全由元素/子元素控制的居中技术。看到我们单独的粉色内边框了吗！？

.fluffy-center {
  padding: 10ch;
}
优点
  • 保护内容
  • 原子
  • 每项测试都暗含这种居中策略
  • 字词间距是间隙
缺点
  • 产生无用感
  • 容器和内容之间存在冲突，因为它们都对自己的尺寸非常坚持

非常适合以字词或短语为中心的居中、标记、胶囊、按钮、条状标签等。

5. Pop & Plop

  1. Squish：好的
  2. 壁球：好
  3. 重复：不佳
  4. 修改：罚款
  5. 流量：正常

这会“弹出”，因为绝对定位会将元素从正常流程中弹出。名称中的“plop”部分源于我发现它最有用的时候：将其放在其他内容之上。这是一种经典且实用的叠加层居中技术，可根据内容大小灵活调整。有时，您只需要将界面放置在其他界面之上。

优点
  • 有用
  • 可靠
  • 在您需要时，它会发挥巨大作用
缺点
  • 包含负百分比值的代码
  • 需要 position: relative 才能强制创建包含块
  • 过早换行和突兀换行
  • 每个包含块只能有 1 个，无需额外操作

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

获胜者

如果我身处孤岛，只能使用一种静心技巧，我会选择…

[鼓声]

Gentle Flex 🎉

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

您始终可以在我的样式表中找到它，因为它对宏布局和微布局都很有用。这是一个全方位可靠的解决方案，其结果符合我的预期。此外，由于我是内在尺寸的狂热爱好者，我倾向于采用这种解决方案。的确，这需要输入很多内容，但它带来的好处远大于额外代码带来的麻烦。

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center 非常微观，很容易被忽略为居中技术，但它是我的居中策略的主要内容。它非常原子化，有时我甚至会忘记自己正在使用它。

总结

哪些因素会破坏您的居中策略？还有哪些挑战可以添加到抗逆力挑战中？我考虑过平移和容器上的自动高度切换…还有什么！？

现在，您已经知道我是如何做到的，那么您会怎么做呢？！让我们采用多样化的方法，学习在 Web 上构建应用的所有方式。按照此博文中的 Codelab 操作，创建您自己的居中示例，就像此博文中的示例一样。在 Twitter 上向我发送您的版本，我会将其添加到下面的社区混剪部分。

社区混剪