Flex垂直居中失效主因是flex-direction默认row使align-items控制水平交叉轴，需设容器高度（如height:100vh）并用justify-content:center+align-items:center，或单子项时用margin:auto。
flex-direction 和 align-items 搞反了，居中就失效
垂直居中失败，90% 是因为 flex-direction 默认是 row，而你只设了 align-items: center——它对的是**交叉轴**，不是主轴。主轴水平时，align-items 控制的是上下对齐；想让子元素在容器里上下居中，必须确保交叉轴是垂直方向。
- 如果容器没设
height或高度由内容撑开，align-items: center看不出效果，先给容器加个明确高度（比如height: 100vh） - 想让单个子元素在父容器中真正垂直+水平居中，用
display: flex+justify-content: center+align-items: center - 别依赖
flex-direction: column来“绕开”问题——它会把主轴变成垂直，此时justify-content才管上下，align-items反而管左右
子元素是块级还是行内，会影响 align-items 的表现
align-items 对所有直接子元素生效，但前提是它们没自己设置 align-self 覆盖；更关键的是，如果子元素是纯文本或 span 这类默认 display: inline 的元素，它不会占满整行，align-items: center 仍会居中，但视觉上容易误判为“没动”。
- 检查子元素是否意外被设了
display: inline或float，这会让它脱离 flex 布局的尺寸控制 - 文字居中常用组合：
display: flex+flex-direction: column+justify-content: center（此时主轴是垂直的，justify-content控制文字块整体上下位置） - 如果子元素有
margin: auto，在 flex 容器里它会覆盖align-items的行为，优先级更高
IE11 对 flex 对齐属性的支持不一致
IE11 支持 display: flex，但对 align-items: center 和 justify-content: center 的实现有偏差，尤其当子元素是 img 或带 vertical-align 的内联元素时，常出现 1–2px 偏移。
- 兼容 IE11 时，避免对
img直接设align-items: center，改用display: flex+margin: auto在子元素上 -
flex-direction: column在 IE11 中对justify-content的支持更稳定，比row+align-items更可靠 - 不要用
align-content—— IE11 几乎不支持多行 flex 的这个属性，且它只在flex-wrap: wrap且有多行时才起作用
用 margin: auto 实现单子项居中更简单，但仅限于一个子元素
当父容器是 display: flex，且只有一个直接子元素时，给该子元素设 margin: auto，它会自动吸收剩余空间，在两个轴上都居中——这是最简方案，无需记对齐方向。
- 只适用于**唯一子元素**；多个子元素时，
margin: auto会让它们之间空出等距间隙，不是你想要的居中 - 它无视
flex-direction，不管主轴是横是竖，都生效 - 注意：如果子元素设置了
flex-shrink: 0或固定宽高，margin: auto依然有效；但如果子元素是inline元素且未设display: block，margin 不会触发块级布局，可能无效
Flex 垂直居中最容易被忽略的点，其实是容器自身的高度是否真实存在——没有高度的 flex 容器，align-items 就像往空气里扔锚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
