在 CSS 中居中

遵循 5 种居中方法并进行一系列测试，了解哪种方法在更改时最具弹性。

Adam Argyle

集中在 CSS 中是一项众所周知的挑战，其中充满了笑话和嘲笑。2020 CSS 已经长大，现在我们可以开怀大笑，开怀大笑，开怀大笑。

如果你更喜欢视频，可以参考本博文的 YouTube 版本：

挑战

还有不同类型的居中效果。根据不同的用例、要居中放置的对象等。为了说明“成功”居中技术背后的原理，我开发了弹性振铃器。系统会对每个居中策略进行一系列压力测试，以平衡策略中的效果，并观察策略的性能。最后，我会揭示得分最高的方法以及“最有价值”的方法。 希望您学会了新的居中技巧和解决方案。

弹性振铃器

弹性振铃器代表我的想法，即居中策略应灵活适应国际布局、大小可变的视口、文本编辑和动态内容。这些原则帮助我们创建了以下弹性测试，以确保定点技术经得起考验：

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

获胜的解决方案应通过将内容保持在中心位置，同时被压缩、压缩、复制、编辑和交换为各种语言模式和方向来展示其弹性。值得信赖的弹性中心，也是安全中心。

图例

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

  • 粉色边框表示居中样式的所有权
  • 灰色框是容器的背景，该背景试图将各项居中
  • 每个子项都具有白色背景颜色，因此您可以看到居中技术对子框大小（如果有）的任何效果

5 名参赛者

弹性振铃器中有 5 种居中技术，只有一种技术会获得弹性王冠 👸?。

1. 内容中心

使用 VisBug 修改和复制内容
  1. 挤压：太棒了！
  2. 壁球：太棒了！
  3. 复制：太棒了！
  4. 修改：太棒了！
  5. Flow：太棒了！

display: grid 的简洁性和 place-content 简写形式是无可比拟的。由于它能够将子项统一居中并对齐，因此对于要读取的元素组，这是一种可靠的居中技术。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
优点
  • 即使在空间受限和溢出的情况下，内容也会居中显示
  • 集中修改和维护在一个位置
  • 间隙可确保 n 个子元素的间距相等n
  • 默认情况下，网格会创建行
缺点
  • 最宽的子级 (max-content) 会为其余所有子级设置宽度。我们会在温和柔性 (Gentle Flex) 中对此进行详细介绍。

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

2. 轻柔柔软

  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;
}
优点
  • 仅处理对齐、方向和分布
  • 修改和维护都集中在一处
  • 间隙可确保 n 个子元素的间距相等n
缺点
  • 大多数代码行

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

3. 汽车机器人

  1. 挤压：太棒了
  2. 壁球：太棒了
  3. 重复：没问题
  4. 修改：不错
  5. Flow：很好

容器设置为弹性样式，无对齐样式，而直接子代通过自动外边距设置样式。元素的各个方面都有着 margin: auto 的魅力，充满怀旧气息。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
优点
  • 趣味把戏
  • 又快又脏
缺点
  • 溢出时的结果很糟糕
  • 依赖于分布而不是间隙，意味着布局可能会在子项接触面时发生
  • “推入”到相应位置似乎不是最佳选择，可能导致子项的框大小发生变化

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

4. 毛绒绒毛衣

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

“毛茸茸的中心”这个选手是迄今为止我们听起来最棒的选手，也是唯一完全由元素/子级拥有的居中技巧。看看我们内部的粉红色边框！？

.fluffy-center {
  padding: 10ch;
}
优点
  • 保护内容
  • 原子
  • 每次测试都隐藏着这种居中策略
  • 字词空间即为间隔
缺点
  • 觉得没用的假象
  • 容器和项之间发生冲突，这是自然而然的，因为两者的尺寸都非常确定

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

5. 流行音乐

  1. 挤压：好的
  2. 壁球：好的
  3. 重复：差
  4. 修改：不错
  5. 活动流：没问题

这会“弹出”，因为绝对定位会使元素超出正常流程。名字中带有“呸”字样的字样往往来自于我觉得最有用的名称，因为它可以放在其他名称上。这是一种经典而实用的叠加层居中技术，可灵活动态调整内容大小。有时你只需要将界面放置到其他界面上

优点
  • 有用
  • 可靠
  • 在您需要时，信息极其宝贵
缺点
  • 带负百分比值的代码
  • 需要 position: relative 来强制执行容器块
  • 换行过早和尴尬
  • 每个包含方块只能有 1 个容器，无需额外操作

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

获奖作品

如果我在岛上，只有一种居中技巧，那就是...

[鼓声]

轻柔柔软 🎉?

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

您可以随时在我的样式表中找到它，因为它对宏布局和微型布局都很有用。这是一个多方面的可靠解决方案，结果符合我的预期。另外，我就是天生的尺码狂，因此倾向于选择采用以下解决方案。没错，输入的内容会很多，但它带来的好处远远超过输入额外的代码的好处。

最有价值球员

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center 非常微小，以至于一项居中技巧很容易被忽视，但它却是我的居中策略的主要元素。它非常原子化，以至于有时我会忘记我用了

总结

哪些类型的事情会破坏你的居中策略？还可以向弹性振铃器添加哪些其他挑战？我考虑过在容器上开启平移和自动高度切换...还有什么？

现在你已经知道我是怎么做的，你知道该怎么做呢？！下面我们就来介绍一下我们的方法 并了解在网页应用中构建应用的所有方法按照此博文的 Codelab 操作，创建您自己的居中示例，就像本博文中的示例一样。你可以发 Twitter 微博分享你的版本，我会把它添加到下面的社区混剪部分。

社区混剪作品