父容器需设 display: flex 且有足够高度，再用 align-items: center 实现子项垂直居中、水平靠左；单子项时可用 margin: auto 0 达成同样效果。
子项水平靠左、垂直居中，用 align-items-center 是对的，但前提是父容器必须是 Flex 布局且设为 flex-direction: row（默认值），同时确保父容器有明确高度或能撑开高度。
确认父容器是 Flex 容器
只加 align-items-center 不起作用？大概率是父元素没启用 Flex。
- 给父容器加上 display: flex
- 保持 flex-direction: row（默认就是，不用额外写）
- 确保父容器有高度（比如 min-height: 100vh 或包裹内容后自然撑高）
子项本身别干扰对齐
如果子项设置了 margin-top / margin-bottom、height 过大、或用了 vertical-align（对 Flex 子项无效），都可能破坏居中效果。
- 移除子项的上下外边距（尤其 margin: auto 在竖直方向不生效）
- 避免给子项设固定 height 超出父容器可用空间
- vertical-align 对 Flex 子项完全无效，删掉它
需要靠左 + 居中？用 justify-content 和 align-items 组合
Flex 中“靠左”由 justify-content: flex-start 控制（默认值），“竖向居中”由 align-items: center 控制。
立即学习“前端免费学习笔记（深入）”；
- 父容器样式可简写为：display: flex; align-items: center;
- 无需写 justify-content: flex-start（默认就是左对齐）
- 若想留点左边距，改用 padding-left 或 margin-left 在子项上
替代方案：单个子项时可用 margin: auto
如果父容器是 Flex，且只有一个子项，直接给子项加 margin: auto，它会自动水平靠左、垂直居中（因为 auto 在主轴（水平）上只在右侧生效，在交叉轴（垂直）上两侧都生效）。
- 子项样式：margin: auto 0; → 垂直居中 + 水平靠左
- 或更明确：margin: auto; margin-right: auto;
基本上就这些。关键不是光加 align-items-center，而是整套 Flex 上下文要配齐。
