纵向对齐需明确布局上下文：flex中column主轴下justify-content控制垂直居中，align-items控制水平居中；grid中place-items仅作用于直接子项；内联元素需统一vertical-align或改用flex容器。
纵向对齐在响应式布局中常被误认为只是 align-items 一设了事，实际多数失效源于交叉轴方向未明确、容器高度不可控或元素自身 display 模式干扰。真正在不同断点下稳定纵向居中，得从轴向定义、容器约束和基线行为三处动手。
flex-direction: column 时 align-items 不生效？
当使用垂直主轴（flex-direction: column）时，align-items 控制的是**横轴（即水平方向）** 的对齐，不是“纵向居中”——这是最常混淆的点。真正影响纵向位置的是 justify-content。
-
justify-content: center→ 垂直居中（主轴是 column 时） -
align-items: center→ 水平居中（交叉轴是 row 时） - 若父容器没设高度（如
height: auto），justify-content: center可能看起来“没反应”，因为容器本身没撑开空间 - 避免给子元素设
margin: auto试图纵向居中——它只在块级上下文中对垂直方向有效，且不适用于 flex 项目
表格、表单、按钮等内联元素纵向对齐错位
表单控件（input、select、button）默认是 inline-block，它们的基线（baseline）对齐会导致视觉上参差不齐，尤其混用 label 和 textarea 时。
- 统一用
vertical-align: top或middle替代默认baseline - 更稳妥的做法：把整组表单项包进
display: flex容器，用align-items: center锁定对齐 - 避免依赖
line-height拉高容器来“凑对齐”，这在响应式缩放时极易断裂 - 注意
textarea默认有resize: both，拖拽后可能破坏 flex 对齐，建议加resize: vertical或禁用
Grid 中 place-items: center 为何有时只水平居中？
place-items: center 是 justify-items: center + align-items: center 的简写，但它只作用于**网格项（grid items）**，而非整个网格容器内容。如果子元素没被识别为 grid item（比如被 display: contents 干扰，或包裹了多余 div），就会失效。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是网格容器的**直接子元素**
- 检查是否意外设置了
grid-area或place-self覆盖了继承值 - 若容器内只有一个子元素，更推荐用
place-content: center（作用于整个网格轨道空间） - 在响应式中慎用
minmax(0, 1fr)配合place-items，某些浏览器对0的解析不一致，可能导致纵向塌陷
纵向对齐真正的难点不在属性本身，而在于你是否清楚当前所处的布局上下文：是 flex 主轴方向？grid 的项/内容/轨道三层空间？还是 inline 元素的基线系统？一旦搞混坐标系，再调参数也只是碰运气。
