flex-direction是最常被重写的弹性容器属性，需确保父容器已声明display:flex；移动端（≤768px）用column，桌面端（≥1025px）用row并配justify-content；注意特异性、align-items在列布局下的影响、gap回退及性能优化。

align-items:center必须设置在grid容器上才能使子元素在交叉轴（默认垂直方向）居中，它控制所有直接子项对齐，单个子项可用align-self覆盖；注意与justify-items（主轴/水平）区分，并排查display:grid缺失、样式覆盖或子元素高度撑满等问题。

绝对定位文字和图片底部对齐偏差源于img默认inline特性及基线对齐机制；应统一vertical-align、用transformtranslateY微调，并在图片尺寸不确定时优先采用flex布局或top:50%+translateY(-50%)实现稳定居中。

最简可靠方式是同时设置justify-content:center和align-items:center，前提是父容器为display:flex且有明确高度；仅justify-content不足，因它只控制主轴对齐，align-items才控制交叉轴居中。

本文讲解如何通过纯CSS实现导航区域悬停时，同步控制覆盖层（overlay）的背景色、字体颜色及垂直偏移，避免JavaScript依赖，修复z-index、选择器作用域和定位失效等常见问题。

多行文本在grid单元格中垂直居中失效，主因是网格项未撑满行高或内部非块级布局；需设align-items:stretch并让网格项用flex实现justify-content:center。