AI 摘要：这篇文章系统梳理了 CSS 中各种布局（Grid、Flexbox、Block、绝对定位等）的对齐机制，总结了 -content、-items、*-self 等属性在不同语境下的行为逻辑，重点在于区分 内容层级 (content level) 与 项目层级 (item level) 的对齐方式。文章核心思想是：对齐总和尺寸 (sizing) 与剩余空间 (free space) 的关系密不可分，不同布局模型下默认值和可用属性会有所不同，理解其背后的逻辑远比记忆“如何写出居中”更重要。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. Alignment 理论
• CSS 对齐有两个层次：content level（容器内整体内容）、item level（单个元素）。
• 三类主要属性：place-content / place-items（全局），place-self（单个元素）。
• 属性分为两大轴向：align-（垂直/交叉轴），justify-（水平/主轴）。
• 对齐效果依赖剩余空间是否存在，“normal” 默认等同于 stretch。

2. Grid Container
• content 概念在 Grid 对应 grid cells，item 对应 grid items。
• -content 控制网格单元整体在容器内的分布；-self 控制 item 在单元格内对齐。
• auto 与 1fr 表现不同：auto 利用对齐缩放元素；1fr 会占满剩余空间导致无对齐空间。
• 元素跨多格时，对齐发生在其 grid area 内。

3. Flexbox Container
• 与 Grid 相比更复杂；main axis 与 cross axis 的切换是难点。
• 横向（默认 row 模式）：只有 content level 对齐，使用 justify-content。
• 纵向：存在 content 和 item 两级对齐，align-items / align-self 针对单个 item。
• flex-wrap 决定是否启用纵向 content 对齐；flex-grow 消耗剩余空间，可能使对齐无效。
• 改变 flex-direction 会交换主/交叉轴，导致属性在不同维度表现不同。

4. Block Container 与 Inline 元素
• Block 布局默认垂直堆叠：垂直轴只有 content level 对齐，水平轴有 item level 对齐 (justify-self)。
• Inline 元素的对齐靠 text-align，不是 CSS Alignment 模块。
• 内联+块元素混合时，浏览器会生成 anonymous block boxes 来容纳内联元素，但这些匿名盒不能直接对齐。

5. auto margins
• margin: auto 本质是将剩余空间转换为 margin，因此其视觉效果类似居中。
• 区别在于 place-self: center 保留空隙，而 auto margin 会填满空间。
• 在 Flexbox 主轴上 auto margin 始终生效，甚至在没有 item-level 对齐的场景下。

6. 绝对定位元素
• 对齐基于 containing block 或 inset-modified containing block(IMCB)。
• 可通过 place-self 直接居中，替代传统的 top:50% + transform 技巧。
• margin: auto 亦可应用，但需显式指定 width/height。

7. Safe Alignment
• 当内容溢出 (negative free space) 时，safe 关键词可避免内容被裁剪到不可见区域。
• 如 justify-self: safe center，可保证在可滚动环境不导致内容不可到达。
• auto margin 天然是安全的，因为只考虑正向剩余空间。

Css-Tip

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!