flex容器必须设为display: flex，否则align-items: center无效；需确保父容器有明确高度、清除默认样式，并注意ie兼容性及flex-direction对交叉轴的影响。
Flex容器必须设为display: flex
很多初学者写了 align-items: center 却没效果，根本原因是父容器没启用 Flex 布局。CSS 的居中属性只在 Flex 或 Grid 容器内生效，纯块级元素上加 align-items 完全无效。
- 必须给列表容器（比如
<ul></ul>或<div>）显式设置 <code>display: flex - 如果列表项是
<li>，注意默认有上下 margin 和 list-style，建议先重置：margin: 0; padding: 0; list-style: none; -
垂直居中针对的是“交叉轴”，对
flex-direction: row（默认）来说，交叉轴就是纵轴，align-items才管用；若改成column，它就变成水平居中了 - 确保父容器有明确高度（比如
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且换行了）时起作用，日常单行列表用不到
align-items: center 不影响子元素高度
这个属性只是把子元素在交叉轴上“对齐”，不是“拉伸”或“撑高”。如果文字本身行高小、容器又没设高度，看起来还是贴着顶部——其实已居中，只是容器太矮没空间体现。
文字列表常见结构下的完整写法
以最典型的 <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></ul>默认的padding-left，否则左侧会空出一块
IE10–11 中 align-items 的兼容写法
IE10/11 支持 Flex，但需要加 -ms- 前缀，且部分行为不一致。比如 align-items: center 在 IE 中对 min-height 容器支持不好，容易失效。
- 必须写双声明：
align-items: center; -ms-align-items: center; - IE 下推荐给父容器设固定
height，而非仅min-height - 如果列表项含图片或 inline-block 元素，IE 可能因基线对齐错位，可加
vertical-align: middle或统一设display: flex到li内部
align-items 本身，而在容器有没有高度、有没有启用 Flex、以及 IE 下那些藏得深的前缀和行为差异。
