align-items 作用于 flex 容器，控制子元素在交叉轴上的对齐，不直接调整文字内部对齐；单行文字垂直居中优先用 line-height 等于容器高度，多行则需 flex + align-items 与 justify-content 配合。
align-items 对文字本身没直接作用
align-items 是作用在 flex 容器上的属性，控制的是**子元素（flex item）在交叉轴上的对齐方式**，不是用来对齐文字内部的行高或基线。如果你把一段文字直接写在 div 里，并给这个 div 设置 display: flex，那它只有一个子元素——就是那个文字节点（Text 节点），align-items 确实会影响这个文字块整体的垂直位置，但容易误以为是在“调整文字行内对齐”。
- 文字内容本身是行内级（inline），默认不占据整行高度，它的垂直对齐受
line-height、vertical-align和父容器font-size共同影响 -
align-items: center让整个文字块在 flex 容器中居中，但若文字周围有padding或margin，视觉上可能仍偏移 - 如果容器高度固定（比如
height: 60px），而文字只有一行，align-items: center通常能实现“视觉居中”，但这本质是块级对齐，不是文本基线对齐
单行文字真想垂直居中，优先用 line-height
对单行文字，最轻量、兼容性最好、也最可控的方式是让 line-height 等于容器高度。
div {
height: 48px;
line-height: 48px; /* 和 height 一致 */
text-align: center;
}- 适用于纯单行、无换行、字体大小稳定的情况
- 不要和
flex混用——加了display: flex后，line-height对垂直居中就失效了（因为文字被当成了 flex item，不再走行内布局） - 注意：若字体用了
font-display: optional或加载慢，首屏可能出现文字“突然上跳”，这是line-height基于字体度量计算导致的，无法完全避免
多行文字 + flex 居中，必须用 align-items + justify-content
多行文字不能靠 line-height，此时 display: flex 是合理选择，但要注意容器和文字包裹层级。
- 文字必须包裹在子元素里（比如
p或span），不能裸写在 flex 容器中（否则部分浏览器会生成匿名块，行为不一致） - 容器设
display: flex、flex-direction: column（如果需要上下居中）或保持默认row（左右布局时上下居中） - 用
align-items: center控制横轴（对齐文字块水平中心），用justify-content: center控制纵轴（对齐文字块垂直中心）
.container {
display: flex;
justify-content: center;
align-items: center;
height: 120px;
border: 1px solid #ccc;
}
.container p {
margin: 0;
text-align: center;
}对应 HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <p>这是第一行<br>这是第二行</p> </div>
align-items 不生效？检查这三点
常见失效原因不是语法错，而是布局前提没满足。
- 父容器没设
display: flex或display: inline-flex——align-items只在 flex 上下文有效 - 子元素是
float或position: absolute—— 这些元素脱离文档流，不参与 flex 排列，align-items对它们无效 - 容器没有明确的交叉轴尺寸（比如 flex-direction 是 row 时，容器缺少明确
height；flex-direction 是 column 时，缺少明确width）—— 浏览器可能按内容撑开，导致“看起来没居中”
文字垂直对齐真正麻烦的地方不在 flex 属性本身，而在你是否清楚当前目标是对齐「文字块」还是「文字行内基线」；前者用 flex，后者看 line-height 和 vertical-align。混用却不理解差异，问题就出在这里。
