在 CSS 中居中

在一系列测试中，遵循 5 种中心化技术，看看哪种技术最能抵御变化。

Adam Argyle

在 CSS 中居中对齐是一项众所周知的挑战，充斥着各种玩笑和嘲讽。2020 年的 CSS 已经长大成人，现在我们可以坦然地笑这些笑话，而不是咬牙切齿地笑。

如果您更喜欢视频，请观看此帖子的 YouTube 版本：

挑战

居中方式有多种类型。从不同的用例、要居中的事物数量等方面进行考虑。为了演示“胜出”居中技术背后的原理，我创建了“弹性响铃器”。这一系列压力测试可让每个中心化策略实现内部平衡，并便于您观察其效果。最后，我会揭晓得分最高的技术，以及“最有价值”的技术。 希望您能从中学习到新的居中技术和解决方案。

Resilience 铃声

弹出式提醒旨在表明我的观点：居中策略应能够适应国际布局、尺寸可变的视口、文本修改和动态内容。这些原则有助于制定以下弹性测试，以确保居中技术能够持久有效：

  1. 压缩：居中应该能够处理宽度变化
  2. 压缩：居中应能处理高度变化
  3. 重复：居中应根据项数量进行动态调整
  4. 修改：居中应根据内容长度和语言进行动态调整
  5. 流程：居中应与文档方向和编写模式无关

胜出方案应在内容被压缩、挤压、复制、修改和切换到各种语言模式和方向时，保持内容居中，从而展示其弹性。可信且弹性强的中心，安全的中心。

图例

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

  • 粉色边框表示居中样式的所有权
  • 灰色框是容器的背景，旨在将项居中
  • 每个子元素的背景颜色均为白色，以便您查看居中技术对子元素框大小（如果有）的影响

5 位参赛者

5 种重心技巧进入了“抗逆力响铃器”，只有一种技巧会获得“抗逆力王冠”👸?。

1. 内容中心

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

很难超越 display: grid 和 place-content 简写的简洁性。由于它会集中对子元素进行居中和对齐，因此对于需要阅读的元素群组来说，它是一种可靠的居中技术。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
优点
  • 即使在空间受限且内容溢出的情况下，内容也会居中显示
  • 集中编辑和维护中心
  • Gap 可确保 n 个子项之间保持等距
  • 网格默认会创建行
缺点
  • 宽度最大的子项 (max-content) 会为其余所有子项设置宽度。轻柔弹性中将对此进行详细讨论。

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

2. Gentle Flex

  1. Squish：太棒了！
  2. 壁球：太棒了！
  3. 重复：太棒了！
  4. 修改：太棒了！
  5. 流程：太棒了！

轻柔弹性是一种更纯粹的仅限居中策略。它柔和细腻，因为与 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. 流程：太棒了！（只要您使用逻辑属性）

参赛者“蓬松居中”是目前听起来最有吸引力的参赛者，也是唯一完全由元素/子元素控制的居中技术。您看到我们的单独内边粉色边框了吗？

.fluffy-center {
  padding: 10ch;
}
优点
  • 保护内容
  • 原子
  • 每项测试都隐藏着这种居中策略
  • 字词间距为空格
缺点
  • 错觉自己没用
  • 由于每个元素的尺寸都非常固定，因此容器和元素之间自然会发生冲突

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

5. Pop & Plop

  1. 挤压：可以
  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;
}

蓬松居中是一种微妙的居中技术，很容易被忽略，但却是我居中策略的常用方法。它非常原子化，有时我会忘记自己在使用它。

总结

哪些类型的因素会破坏您的居中策略？除了这些，您还能为弹性响铃添加哪些其他挑战？我考虑过翻译和在容器上使用自动高度开关… 还有什么？

现在您已经知道我是如何做到的，您会怎么做呢？让我们拓展方法，了解在 Web 上构建应用的所有方式。按照本文中的 Codelab 操作，创建您自己的居中示例，就像本文中的示例一样。请在推特上向我发送您的版本，我会将其添加到下方的社区混剪作品部分。

社区混剪作品