flex布局中align-items: center失效的主因是父容器无高度，导致交叉轴长度为0；需确保父容器有明确高度（如min-height: 100vh）、display: flex生效、子元素未干扰对齐逻辑。
Flex 布局中 align-items: center 失效，90% 的情况不是写错了属性，而是父容器根本没高度——它连“中点”都算不出来。
父容器没高度是头号原因
浏览器计算垂直居中需要一个明确的交叉轴长度。如果父容器 height 是 auto 且内部没内容撑开，它的实际高度就是 0，align-items: center 就像对空房间说“站中间”，无处落脚。
- 检查 computed styles 中父容器的
height值，常见是0px或极小值（如仅含文字时≈行高） - 全屏场景优先用
min-height: 100vh，比height: 100%更可靠（避免祖先链断掉） - 移动端 Safari 的
100vh在地址栏收起/展开时会跳变，可加min-height: -webkit-fill-available兜底 - 若父容器是
，别忘了html, body { height: 100%; margin: 0; }
display: flex 没生效或被覆盖
align-items 只对 display: flex 或 display: inline-flex 容器有效，对其他 display 类型完全无效。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确认父容器确实写了
display: flex，而不是display: block或漏掉了分号/大括号 - 检查是否被更高级别的 CSS 规则覆盖（比如某个 reset.css 把
display改回了block） - 避免用
display: inline-flex包裹单个元素——它默认不占满父宽，高度行为更难预测 - IE11 需要
-ms-flex-align: center前缀，否则可能错位
子元素干扰了对齐逻辑
Flex 居中由父容器统一控制，子元素加某些样式会破坏这个前提。
- 别给子元素设
margin: auto：Safari 下会和align-items冲突，导致上下偏移 - 避免
position: absolute：脱离文档流后，align-items对它完全无效 - 内联元素（如裸文本、
<span></span>）可能因基线对齐产生视觉偏移，建议包一层<div> 或设 <code>display: inline-block - 子元素设了
height: 100%但父级高度未传递？放弃继承式写法，直接靠父容器 flex 居中更稳 -
align-content只对多行 Flex 容器（flex-wrap: wrap且真换行）生效，单行时完全没用 -
align-self是子元素自己的对齐声明，会覆盖父级align-items，检查是否误加在子元素上 - 默认
flex-direction: row时，justify-content控水平，align-items控垂直；改成column后两者作用方向对调，别写反
误用了 align-content 或 align-self
align-content 和 align-self 看起来像 align-items，但作用完全不同。
真正容易被忽略的，不是属性名拼错，而是每次改完样式后，先打开开发者工具看一眼父容器的 computed height——它比反复调 align-items 有效十倍。
