请遵循 5 种居中技巧,同时进行一系列测试,看看哪一种在改变时的弹性最好。
在 CSS 中居中是个臭名昭著的挑战,到处是笑话和嘲讽。2020 年 CSS 已经长大了,现在我们可以真诚地笑一下这些笑话,而不是通过 紧张的牙齿。
如果你更喜欢视频,可以参阅此博文的 YouTube 版本:
挑战
有多种不同的居中类型。从不同的使用情形来看 为了证明“胜出”的置中技术 创建了弹性振铃器。需要对每个中心肺复位点进行一系列压力测试 并观察其效果 最后,我会揭示最高分的技巧,以及“最有价值”的技巧。 希望你已经掌握了新的置中技巧和解决方案。
坚定不移
弹性振铃器代表了我对于 策略应能够灵活适应国际布局、大小可变的视口、文字修改和动态变化 内容。这些原则有助于制定以下弹性测试, 核心技术能够承受:
- Squished: 居中应该能够处理宽度的变化
- 已压缩: 居中应该能够处理高度的变化
- 重复内容: 居中位置应根据内容数量动态变化
- 修改: 中心内容应根据内容的长度和语言动态调整
- 流程: 居中位置应与文档方向和书写模式无关
胜出的解决方案应通过将内容 同时被挤压、压缩、复制、修改和交换到 各种语言模式和方向值得信赖的弹性中心,安全中心。
图例
我提供了一些视觉颜色提示,以帮助您保留一些元信息 在上下文中:
![](https://web.developers.google.cn/static/articles/centering-in-css/image/4K35cL1tVpEsGqb4FgKp.png?authuser=1&hl=da)
- 粉色边框表示居中样式的所有权
- 灰色框是希望居中的容器背景 项
- 每个子级的背景颜色都为白色,因此您可以看到 居中技术对子框大小(如果有)
5 名参赛者
有 5 种置中技巧进入弹性振铃器,只有一个会获得 弹性王冠 👸?。
1. 内容中心
- Squish:太好了!
- 壁球:太好了!
- 重复:太好了!
- 修改:太好了!
- 流程:太棒了!
display: grid
和
place-content
简写形式。由于它会将儿童集中到一起,并将他们视为合理性,
它是一种将要读取的元素组居中的可靠技巧
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- 即使在有限的空间和溢出的情况下,内容也会居中显示
- 集中编辑和维护都在一个位置
- 间隔可保证 n 个子元素之间的间距均等
- 默认情况下,网格会创建行
- 最宽的子项 (
max-content
) 设置其他所有子项的宽度。这将是 详情请参阅 Gentle Flex。
非常适合包含段落和标题、原型或 通常是需要清晰地居中的内容。
2. 轻柔柔韧锻炼
- Squish:太好了!
- Squash:太棒了!
- 复制:太棒了!
- 修改:太棒了!
- Flow:很好!
Gentle Flex 是一种仅以中心为中心的策略。它很轻柔
与 place-content: center
不同,在播放过程中,不会更改任何儿童盒子大小,
居中。所有物品都要尽可能轻柔地堆叠在一起、居中放置并隔开。
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- 仅处理对齐、方向和分布
- 在同一位置进行编辑和维护
- 间隔可保证 n 个子元素之间的间距均等
- 大部分代码行
非常适合宏观布局和微观布局。
3. 自动客服
- Squish:很好
- 壁球:很好
- 重复:没关系
- 修改:非常好
- 流程:很好
该容器设置为 flex 而不采用对齐样式,而直接子容器则
使用自动外边距设置样式。总有一些怀旧而奇妙之处
margin: auto
处理元素的各个面。
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- 趣味把戏
- 快速脏乱
- 溢出时的尴尬结果
- 依赖分布而非间隔,意味着子元素可能会出现布局 边碰触
- 被“推送”可能就不能带来理想的效果 设置为孩子的 Box 大小
非常适合将图标或伪元素居中。
4. 毛绒球中心
- Squish:不好
- 壁球:糟糕
- Duplicate:bad
- 修改:太棒了!
- Flow:很好!(只要您使用逻辑属性)
参赛者“毛茸茸的中心”是迄今为止我们最可口的竞争者,也是唯一 居中方法。欣赏单曲的内心粉色 边框!?
.fluffy-center {
padding: 10ch;
}
- 保护内容
- 原子
- 每个测试都秘密地包含这种居中策略
- 字词间存在间隙
- 感觉没有用
- 因为容器和项目之间自然存在冲突 确定自己的尺码
非常适合以字词或短语为中心的居中、标签、药丸、按钮、条状标签和 。
5. 流行音乐和啁啁星
- Squish:好的
- 壁球:可以
- Duplicate:bad
- 修改:没关系
- 流程:没问题
这“流行”因为绝对定位会使元素超出正常范围 。“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 我会把它添加到 社区混剪部分。