在 CSS 中居中

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

Adam Argyle

在 CSS 中居中是个臭名昭著的挑战，到处是笑话和嘲讽。2020 年的 CSS 已经长大成人，现在我们可以坦然地笑这些笑话，而不是咬牙切齿地笑。

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

挑战

居中方式有多种类型。根据不同的使用场景、要居中的事物数量等。为了演示“成功”居中方法背后的原理，我创建了 The Resilience Ringer。这一系列压力测试可让每个中心化策略实现内部平衡，并便于您观察其效果。最后，我会揭晓得分最高的技术，以及“最有价值”的技术。 希望你已经掌握了新的置中技巧和解决方案。

Resilience 铃声

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

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

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

图例

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

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

5 位参赛者

5 种重心技巧进入了“韧性响铃器”，只有 1 种将获得“韧性王冠”👸?。

1. 内容中心

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

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

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

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

2. 轻柔 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. 自动客服

  1. 挤压：非常好
  2. 壁球：非常棒
  3. 重复：可以
  4. 修改：太棒了
  5. 流程：非常棒

容器设置为 flex，没有对齐样式，而直接子项的样式为自动边距。margin: auto 在元素的方方面面均可发挥作用，总有一种怀旧而又美妙的感觉。

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

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

4. Fluffy Center

  1. Squish：不好
  2. 壁球：差
  3. 重复：不良
  4. 修改：太棒了！
  5. 流程：太棒了！（只要您使用逻辑属性）

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

.fluffy-center {
  padding: 10ch;
}
优点
  • 保护内容
  • 原子
  • 每次测试都秘密地包含这种居中策略
  • 字词间距为空格
缺点
  • 无用幻觉
  • 容器和项目之间会发生冲突，因为各个项目的尺寸都非常严格

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

5. Pop & Plop

  1. 挤压：正常
  2. 壁球：可以
  3. Duplicate：bad
  4. 修改：没问题
  5. 流程：正常

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

优点
  • 有用
  • 可靠
  • 在您需要时，它非常有用
缺点
  • 含负百分比值的代码
  • 需要 position: relative 才能强制执行包含代码块
  • 尽早换行和尴尬
  • 每个包含块只能有一个，无需额外操作

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

获胜者

如果我被困在荒岛上，只能使用 1 种中心法，那会是…

[鼓声]

柔和的柔韧性 🎉?

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

您随时可以在我的样式表中找到它，因为它对宏观布局和微观布局都很有用。这是一个全面的可靠解决方案，结果符合我的预期。此外，由于我对内在尺寸非常着迷，因此我倾向于采用这种解决方案。没错，这需要输入大量代码，但它带来的好处远远大于额外的代码量。

MVP

毛绒球中心

.fluffy-center {
  padding: 2ch;
}

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

总结

什么类型会破坏您的集中策略？除了这些，还可以将哪些其他挑战添加到弹性铃声中？我考虑过平移和容器自动调高开关，还有什么呢？！

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

社区混剪作品