justify-content 控制主轴对齐，align-items 控制交叉轴对齐，具体方向由 flex-direction 决定；grid 中 justify-items/align-items 仅作用于直接子项且可被 self 属性覆盖；绝对定位居中需脱离文档流；vertical-align 作用于行框基线而非父容器。
flex 布局里 justify-content 和 align-items 到底控制哪边？
这两个属性不看方向就乱套。它们的作用完全取决于 flex-direction 的值：
display: flex; flex-direction: row; /* 默认 */ justify-content: center; /* 横向居中（主轴） */ align-items: center; /* 纵向居中（交叉轴） */如果改成
flex-direction: column，主轴变成纵向，justify-content 就管上下对齐，align-items 反而管左右了。常见错误是只记“justify 是水平、align 是垂直”，结果在 column 下布局翻车。
grid 布局中 justify-items 和 align-items 为什么有时没反应？
这两个属性只对 grid container 内的直接子元素（grid items）生效，且前提是这些 item 没有单独设置 justify-self 或 align-self——后者会覆盖容器级设置。
更关键的是：它们只影响单个 grid cell 内部内容的对齐，不是整个网格线的对齐。
如果想让整个网格区域在页面中居中，得在外层加 margin: auto 或用父容器 flex 包一层。
绝对定位元素用 top/left + transform: translate(-50%, -50%) 居中为什么必须配 position: absolute？
因为 transform 的偏移基准是元素自身尺寸，但 top: 50% 和 left: 50% 的百分比是相对于父容器的宽高计算的。
只有当元素脱离文档流（比如 position: absolute 或 fixed），top/left 才能真正以父容器为参考；否则 relative 下的 top 只是相对自身原始位置偏移，translate 也会跟着偏移源点一起动，结果不可控。
顺带一提：inset: 0; margin: auto; 在已知宽高的绝对定位元素上也能居中，但不支持宽高未定的场景。
文本内联元素（如 span）怎么和旁边文字或图标对齐？
别碰 vertical-align 之前先确认它的作用域：它只对 inline-level 元素有效，且对齐参照的是当前行框（line box）的基线（baseline）或其他对齐线，不是父容器边界。
常见踩坑点：
-
vertical-align: middle不是“元素中间对齐父容器中间”，而是“元素中线对齐父行框中线”——而行框中线又受行内其他元素高度影响 - 图片默认
vertical-align: baseline，下方会留缝隙，加vertical-align: top或display: block更可靠 - 和
line-height配合才能稳定控制行内垂直位置，比如设line-height: 1.5em后再用vertical-align: middle
对齐问题最常出在混淆「作用对象」和「参考系」——是元素自身、父容器、行框，还是网格单元格？搞清这个，比死记属性名管用得多。
立即学习“前端免费学习笔记（深入）”；
