父容器需设 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 上下文要配齐。