align-items: center 不生效的主因是父容器未满足Flex前提：缺display: flex、加错父级、高度未设或过小；子元素需为直接后代，避免vertical-align冲突；checkbox与文字对齐差异源于baseline与margin box中心区别。
align-items: center 不生效的常见原因
多数时候不是写错了，而是父容器没满足 Flex 布局前提条件。最常踩的坑是：display: flex 没加，或者加在了错误的父级上——比如直接加在 <label></label> 上，但实际需要包裹文字和 <input type="checkbox"> 的共同父容器。
另一个隐蔽问题是：父容器高度未明确，或被内容撑开导致“居中”视觉不明显。Flex 的 align-items: center 是按容器的交叉轴（这里是垂直方向）对齐，如果容器本身高度只有 20px，那再怎么居中也看不出效果。
- 确保父元素设置了
display: flex，且子元素是直接后代（不是隔了一层<span></span>或<div>） <li>父容器最好有明确高度（如 <code>height: 40px）或最小高度（min-height: 40px），否则依赖内容撑高时容易误判 - 避免给子元素（尤其是
<input>）设置vertical-align，它和 Flex 对齐逻辑冲突，可能造成错位 - 优先用
align-items: center，绝大多数场景已足够；若需像素级精准，可微调margin-top或transform: translateY()作用于<input> - 不要给
<input>设line-height，它不响应这个属性；设height+vertical-align: middle是旧方案，和 Flex 混用易出问题 - 文字用
<span></span>包裹比直接写在<label></label>里更可控，避免换行或空格影响基线 - 不需要加
-webkit-前缀，当前所有支持 Flex 的引擎都已去掉前缀要求 - 移动端点击区域小？给父容器加
padding，而不是放大<input>自身——后者会破坏对齐，且无法用 CSS 放大原生 checkbox 的渲染尺寸 - 避免在 Flex 容器上同时设
text-align: center（水平居中），除非真需要整行居中；它不影响align-items，但容易和设计意图混淆
checkbox 和文字高度不一致时的对齐细节
原生 <input type="checkbox"> 在不同浏览器里默认尺寸、基线位置略有差异，文字（尤其是不同字号/行高）的 baseline 也不统一，单纯靠 align-items: center 有时仍会差 1–2px。
这不是 bug，是 baseline 对齐和中心点对齐的本质区别。Flex 的 center 是按容器的交叉轴中点对齐子元素的 margin box 中心，而 checkbox 渲染后自带内边距和不可见的 baseline 偏移。
立即学习“前端免费学习笔记（深入）”；
兼容性与移动端适配要点
align-items: center 在所有现代浏览器（包括 iOS Safari 9+、Android Chrome 40+）都稳定支持，但老安卓 WebView（如 4.3 及更早）可能不认 flex，或对 align-items 解析异常。
如果必须兼容 Android 4.2–4.3，别硬扛 Flex，改用 display: table-cell + vertical-align: middle 更稳妥；但日常项目中，这类设备占比极低，优先保证 Flex 写法简洁清晰。
一个可靠的基础结构示例
下面这段 HTML + CSS 经过多个环境验证，能稳定实现 checkbox 与右侧文字垂直居中：
<label style="display: flex; align-items: center; min-height: 40px;"> <input type="checkbox" style="margin-right: 8px;"> <span>我已阅读并同意条款</span> </label>
关键点就三个：display: flex 加在 <label></label> 上、align-items: center 同级、min-height 提供参考基准。其余样式（如 margin-right）只是增强可读性，不影响对齐逻辑。
真正容易被忽略的是：当文字换行时，align-items: center 会让 checkbox 垂直对齐的是多行文字的**整体框中心**，而非第一行。如果设计要求始终对齐首行，就得换思路——比如用 align-self: flex-start 配合 padding-top 手动调，但这已超出“垂直居中”的原始需求了。
