在 CSS 中居中

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

在 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: gridplace-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 我会把它添加到 社区混剪部分。

社区混剪作品