可以，但需容器设为 display: flex 并有明确高度（如 height 或 min-height），且子元素不能用 float、position: absolute 等脱离 flex 流。
align-items: center 能否在固定高度容器里垂直居中子元素
可以，但前提是容器必须是 display: flex 且设置了明确高度（如 height: 200px 或 min-height），同时子元素不能自身触发“块级格式化上下文”导致脱离 flex 布局流（比如设置了 float 或 position: absolute）。
为什么有时 align-items: center 看似没生效
常见原因不是属性写错，而是布局前提缺失或干扰：
- 容器缺少
display: flex——align-items只在 flex 容器上有效 - 容器高度为
auto（比如没设height、min-height，且子元素没撑开它）—— 此时容器“没高度”，自然谈不上垂直居中 - 子元素是
block且设置了margin: auto或vertical-align—— 这些对 flex 子项无效，反而可能因外边距折叠造成视觉错觉 - 父容器被
overflow: hidden截断，而子元素因行高/内边距实际溢出，看起来像“没居中”
固定高度容器 + 单行文本的典型写法
这是最常遇到的场景：一个高 60px 的导航栏，里面文字要垂直居中。关键在于控制容器高度和 flex 行对齐方式：
.nav-item {
display: flex;
height: 60px;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（可选） */
}
<p>.nav-item span {
margin: 0; /<em> 清除默认段落/标题的 margin </em>/
line-height: 1; /<em> 避免行高额外撑开 </em>/
}注意：line-height 设为 1 或与容器高度一致（如 line-height: 60px）能进一步确保文本基线不偏移；若子元素是图片，记得设置 vertical-align: middle 或统一用 flex 包裹。
立即学习“前端免费学习笔记（深入）”；
align-items 和 align-self 的优先级关系
align-items 是容器级属性，定义所有子项的默认交叉轴对齐方式；align-self 是子项级属性，可覆盖单个子项的行为。例如：
.container {
display: flex;
height: 100px;
align-items: center;
}
<p>.item-a { align-self: flex-start; } /<em> 顶对齐，无视 container 的 center </em>/
.item-b { align-self: center; } /<em> 显式保持居中 </em>/
.item-c { } /<em> 继承 container 的 center </em>/这个覆盖机制在混合内容（比如图标+文字+按钮）需要差异化对齐时很实用，但也容易因遗漏 align-self 导致某个元素“突然偏了”——调试时建议先检查子元素是否意外设置了该属性。
真正卡住人的往往不是 align-items: center 本身，而是容器有没有形成“有高度的 flex 格子”。一旦高度塌陷或 display 失效，再怎么调对齐都没用。
