五种 CSS 居中技术对比

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

挑战

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

示例：弹性振铃器

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

宽度挤压：居中应能够处理宽度变化
高度挤压：居中应能够处理高度的变化
元素重复：居中应根据项数量动态调整
内容修改：居中应该根据内容的长度和语言动态变化
布局方向 flow：居中应该与文档方向和书写模式无关

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

图例

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

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

5 名参赛者

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

1. 内容中心

宽度挤压：太棒了！
高度挤压：太棒了！
元素复制：太棒了！
内容修改：太棒了！
Flow：太棒了！

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

优点

即使在空间受限和溢出的情况下，内容也会居中显示
集中修改和维护在一个位置
间隙可确保 n 个子元素的间距相等n
默认情况下，网格会创建行

缺点

最宽的子级 (max-content) 会为其余所有子级设置宽度。我们会在温和柔性 (Gentle Flex) 中对此进行详细介绍。

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

注意：place-content 并非 display: grid 专有。display: flex 也可以受益于 place-content 和 place-item 简写形式。

2. 温和柔性 (Gentle Flex)

宽度挤压：太棒了！
高度挤压：太棒了！
元素复制：太棒了！
内容修改：太棒了！
Flow：太棒了！

“Gentle Flex”是一种真正的“居中”策略。该图标柔软温和，因为与 place-content: center 不同，在居中时不会更改子元素框大小。应尽可能轻柔地将所有内容堆叠、居中并间隔开来。

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

优点

仅处理对齐、方向和分布
修改和维护都集中在一处
间隙可确保 n 个子元素的间距相等n

缺点

代码行多

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

3. Autobot

高度挤压：太棒了
宽度挤压：太棒了
元素重复：没问题
内容修改：不错
Flow：很好

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

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

优点

趣味把戏
又快又脏

缺点

溢出时的结果很糟糕
依赖于分布而不是间隙，意味着布局可能会在子项接触面时发生
“推入”到相应位置似乎不是最佳选择，可能导致子项的框大小发生变化

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

4. fluffy 居中

高度挤压：差
宽度挤压：差
元素重复：差
内容修改：太棒了！
Flow：太棒了！（只要您使用逻辑属性）

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

.fluffy-center {
  padding: 10ch;
}

优点

保护内容
Atomic
每次测试都隐藏着这种居中策略
字词空间即为间隔

缺点

觉得没用的假象
容器和项之间发生冲突，这是自然而然的，因为两者的尺寸都非常确定

非常适合以字词或短语为中心的居中、tags, pills, buttons, chips标签等。

5.Pop & Plop

高度挤压：好的
宽度挤压：好的
元素重复：差
内容修改：不错
flow：没问题

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

优点

有用
可靠
在您需要时，信息极其宝贵

缺点

带负百分比值的代码
需要 position: relative 来强制执行容器块
换行过早和尴尬
每个包含方块只能有 1 个容器，无需额外操作

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

获奖作品

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

[鼓声]

温和 flex 🎉?

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

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

最有价值球员

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

阅读余下内容

居中 css| 2024-07-23