答案：使用Flexbox居中需根据主轴方向正确设置align-items和justify-content。当flex-direction为row时，justify-content控制水平居中，align-items控制垂直居中；改为column时，主轴变为垂直方向，justify-content控制垂直居中，align-items控制水平居中，通过调整两属性可实现任意居中布局。
在CSS中使用Flexbox实现元素居中对齐，关键在于正确组合 align-items 和 justify-content 两个属性。它们分别控制交叉轴和主轴上的对齐方式，配合使用可以轻松实现水平垂直居中。
理解主轴与交叉轴
Flexbox 是一种一维布局模型，布局方向由 flex-direction 决定：
- 默认为 row：主轴为水平方向，交叉轴为垂直方向
- 设置为 column：主轴为垂直方向，交叉轴为水平方向
居中对齐的效果取决于当前的主轴方向。
水平垂直居中（最常见场景）
当容器内元素需要在父容器中完全居中时，使用以下样式：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
justify-content: center; /* 主轴居中（水平） */
align-items: center; /* 交叉轴居中（垂直） */
}
适用于 flex-direction: row 的情况，子元素会在容器中水平垂直都居中。
仅水平或仅垂直居中
根据需求可单独使用其中一个属性：
-
只水平居中：设置
justify-content: center，保持align-items: stretch（默认） -
只垂直居中：设置
align-items: center，主轴方向将按默认从左开始排列
例如，一列按钮垂直居中但水平靠左，就只需设置 align-items: center 并保持主轴为 row。
在 column 方向下居中
当设置 flex-direction: column 时，主轴变为垂直方向：
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中（现在是主轴） */
align-items: center; /* 水平居中（现在是交叉轴） */
}
此时 justify-content 控制垂直对齐，align-items 控制水平对齐，依然实现居中效果。
基本上就这些。只要分清主轴方向，灵活运用这两个属性，就能应对大多数居中布局需求。不复杂但容易忽略的是轴的方向变化带来的行为差异。
