CSS怎样使用Flex实现文字列表垂直居中_掌握align-items: center特性

Flex容器必须设为display: flex，否则align-items: center无效；需确保父容器有明确高度、清除默认样式，并注意IE兼容性及flex-direction对交叉轴的影响。

Flex容器必须设为display: flex

不少初学者写了 align-items: center 父容器未开启 Flex 布局，正是属性不生效的根源：居中属性的作用范围仅限 CSS 的 Flex 或 Grid 容器，添加到纯块级元素上 align-items 不会产生任何效果。

• 列表容器必须显式设置，例如 <ul> 或 <div>）需要明确设置 display: flex
• 若列表项属于 <li>，建议先重置 list-style 以及默认存在的上下 margin：margin: 0; padding: 0; list-style: none;
• 所谓垂直居中，针对的是“交叉轴”；对于 flex-direction: row（默认）而言，纵轴就是交叉轴，因此align-items 才能生效；如果改为 column，它实现的就会是水平居中

align-items: center 不影响子元素高度

该属性的作用是让子元素沿交叉轴“对齐”，并不会将其“拉伸”或“撑高”。当文字行高较小且容器没有高度时，视觉上仍像贴在顶部；实际上元素已经居中，只是容器太矮，缺少可供体现的空间。

• 应确保父容器具有明确高度，例如 height: 200px）或设置最小高度（min-height），不然 align-items 不会呈现明显的视觉反馈
• align-items: center 处理单行文字已经足够，多行文本则需要配合 line-height 或 flex-direction: column + justify-content: center 才能保持稳定
• 不要同时设置 align-items: center 和 align-content: center：后者仅会在多行 Flex 容器中生效，也就是 flex-wrap: wrap 并且已经换行的情况，日常单行列表无需使用

常见文字列表结构的完整实现方式

以最典型的 <ul><li>…</li></ul> 作为示例，下面的代码能够稳定完成垂直居中：

ul {  display: flex;  flex-direction: column;  align-items: center;  height: 300px;  margin: 0;  padding: 0;  list-style: none;}li {  margin: 8px 0;}

• 使用 flex-direction: column 将列表项纵向排列，再借助 align-items: center 使每一项的文字水平居中，此时交叉轴处于水平方向
• 如果需要保留横向排列，例如导航栏，则继续使用 row，并改用 justify-content: center 使整行居中，然后通过 align-items: center 对齐每项文字的基线
• 同时别忘记清除 <ul> 默认存在的 padding-left，否则左侧会留下空白区域

IE10–11 中 align-items 的兼容写法

要让 Flex 在 IE10/11 中得到支持，还需加 -ms- 前缀，而且部分行为存在差异。例如 align-items: center 在 IE 环境中对 min-height 容器的支持较差，容易出现失效。

立即学习“前端免费学习笔记（深入）”；

• 需要同时写两条声明：align-items: center; -ms-align-items: center;
• 在 IE 中，建议为父容器设置固定 height，不要只设置 min-height
• IE 出现基线对齐错位时，可加；这种情况可能由列表项中的图片或 inline-block 元素引起 vertical-align: middle ，或统一设置 display: flex 到 li 内部

Flex 垂直居中表面上并不复杂，真正容易造成阻碍的通常不是 align-items 本身，而是容器是否具备高度、是否已经启用 Flex，以及 IE 环境中不易察觉的前缀要求和行为差异。