在 CSS 中居中

请遵循 5 种居中技巧，同时进行一系列测试，看看哪一种在改变时的弹性最好。

Adam Argyle

在 CSS 中居中是个臭名昭著的挑战，到处是笑话和嘲讽。2020 年 CSS 已经长大了，现在我们可以真诚地笑一下这些笑话，而不是通过 紧张的牙齿。

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

挑战

有多种不同的居中类型。从不同的使用情形来看 为了证明“胜出”的置中技术 创建了弹性振铃器。需要对每个中心肺复位点进行一系列压力测试 并观察其效果 最后，我会揭示最高分的技巧，以及“最有价值”的技巧。 希望你已经掌握了新的置中技巧和解决方案。

坚定不移

弹性振铃器代表了我对于 策略应能够灵活适应国际布局、大小可变的视口、文字修改和动态变化 内容。这些原则有助于制定以下弹性测试， 核心技术能够承受：

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

胜出的解决方案应通过将内容 同时被挤压、压缩、复制、修改和交换到 各种语言模式和方向值得信赖的弹性中心，安全中心。

图例

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

  • 粉色边框表示居中样式的所有权
  • 灰色框是希望居中的容器背景 项
  • 每个子级的背景颜色都为白色，因此您可以看到 居中技术对子框大小（如果有）

5 名参赛者

有 5 种置中技巧进入弹性振铃器，只有一个会获得 弹性王冠 👸?。

1. 内容中心

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
编辑和复制内容 VisBug
  1. Squish：太好了！
  2. 壁球：太好了！
  3. 重复：太好了！
  4. 修改：太好了！
  5. 流程：太棒了！

display: grid 和 place-content 简写形式。由于它会将儿童集中到一起，并将他们视为合理性， 它是一种将要读取的元素组居中的可靠技巧

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
优点
  • 即使在有限的空间和溢出的情况下，内容也会居中显示
  • 集中编辑和维护都在一个位置
  • 间隔可保证 n 个子元素之间的间距均等
  • 默认情况下，网格会创建行
缺点
  • 最宽的子项 (max-content) 设置其他所有子项的宽度。这将是 详情请参阅 Gentle Flex。

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

2. 轻柔柔韧锻炼

  1. Squish：太好了！
  2. Squash：太棒了！
  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 个子元素之间的间距均等
缺点
  • 大部分代码行

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

3. 自动客服

  1. Squish：很好
  2. 壁球：很好
  3. 重复：没关系
  4. 修改：非常好
  5. 流程：很好

该容器设置为 flex 而不采用对齐样式，而直接子项 使用自动外边距设置样式。总有一些怀旧而奇妙之处 margin: auto 处理元素的各个面。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
优点
  • 趣味把戏
  • 快速脏乱
缺点
  • 溢出时的尴尬结果
  • 依赖分布而非间隔，意味着子元素可能会出现布局 两边触碰
  • 被“推送”可能就不能带来理想的效果 设置为孩子的 Box 大小

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

4. 毛绒球中心

  1. Squish：不好
  2. 壁球：糟糕
  3. Duplicate：bad
  4. 修改：太棒了！
  5. Flow：很好！（只要您使用逻辑属性）

参赛者“毛茸茸的中心”是迄今为止我们最可口的竞争者，也是唯一 居中方法。欣赏单曲的内心粉色 边框！？

.fluffy-center {
  padding: 10ch;
}
优点
  • 保护内容
  • 原子
  • 每个测试都秘密地包含这种居中策略
  • 字词间存在间隙
缺点
  • 感觉没有用
  • 因为容器和项目之间自然存在冲突 确定自己的尺码

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

5. 流行音乐和啁啁星

  1. Squish：好的
  2. 壁球：可以
  3. Duplicate：bad
  4. 修改：没关系
  5. 流程：没问题

这“流行”因为绝对定位会使元素超出正常范围 。“plop”部分名称来自于对我来说最有用的时机： 把它扔在别的东西上这是一种经典且实用的叠加中心 一种随内容大小变化的动态技术。有时，您只需要 将界面放在其他界面上面

优点
  • 有用
  • 可靠
  • 适时为您提供所需帮助
缺点
  • 含负百分比值的代码
  • 需要 position: relative 才能强制执行包含代码块
  • 尽早换行和尴尬
  • 每个包含块只能有 1 个，无需执行额外的操作

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

获胜者

如果我在一座岛屿上，只能运用 1 种居中技巧，那会是...

[鼓声]

柔和的柔韧性 🎉?

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

您始终可以在我的样式表中找到它，因为它对宏和 微布局这是一种全面的可靠解决方案，效果可满足我的 预期。我又是天生的尺码爱好者 引入这个解决方案。没错，输入的内容很多，但它带来的好处 会比额外代码多出很多。

MVP

毛绒球中心

.fluffy-center {
  padding: 2ch;
}

“毛绒中心”做成一个中心点，很容易被忽视。 但它却是我制定集中策略时的一项主要目标它的原子性很强 忘掉我也在使用它

总结

什么类型会破坏您的集中策略？还有哪些挑战 是否有可能添加到弹性振铃器？我考虑过 还有容器自动变高开关...还有什么？！

现在你知道我怎么做到的了，你会怎么做？！让我们采用多样化的方法 并学习在 Web 上构建应用的所有方法。请在此 Codelab 中阅读这篇博文， 创建您自己的居中示例，就像这篇博文中的示例一样。Tweet 我会把它添加到 社区混剪部分。

社区混剪作品