flex居中失效最常见原因是父容器未设高度或display:flex未生效；align-items仅在flex容器交叉轴有效；需确保父容器有明确高度、避免margin:auto冲突、子元素不能绝对定位；grid的place-items:center语义清晰但兼容性有限；vertical-align不适用于普通块级容器居中。
flex 居中为什么写了却没效果
最常见的情况是父容器没设高度，或者 display: flex 没生效。align-items: center 不是“自动生效”的魔法属性，它只在 flex 容器的交叉轴上有意义。
- 父容器必须有
display: flex或display: inline-flex，否则align-items和justify-content完全被忽略 - 父容器高度必须明确——比如
height: 100vh、min-height: 300px，或被子内容撑开；如果只写width而没高度，容器实际高度为 0，居中自然失效 - 避免在 flex 子元素上同时用
margin: auto，尤其在 Safari 中会与align-items冲突，导致上下偏移 - 子元素若设了
position: absolute，它就脱离 flex 布局上下文，align-items对它无效
绝对定位 + translate(-50%, -50%) 的真实约束
这个方案兼容性好（IE9+），但不是“套公式就稳”，关键依赖定位上下文和自身尺寸计算逻辑。
- 父容器必须有
position: relative（或absolute/fixed），否则top: 50%和left: 50%会相对于 viewport 计算，滚动时元素飘走 -
transform: translate(-50%, -50%)中的百分比是相对于元素自身宽高，不是父容器——所以它不关心子元素尺寸是否固定，这点比负 margin 方案更鲁棒 - 如果子元素是图片且未设置宽高，加载前会短暂闪动；建议提前加
width/height或用aspect-ratio占位 - 不能拆成
translateX(-50%) translateY(-50%)单独写，易漏、易拼错，且无性能或语义收益
grid 的 place-items: center 适用边界
这是目前语义最清晰、代码最简的二维居中方案，但不是万能替代 flex 的工具。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 要求浏览器支持 Chrome 57 / Firefox 52 / Safari 10.1+；IE11 及更早版本不支持，需回退到
justify-items: center; align-items: center; - 只对直接子元素生效，不要求子元素显式设
grid-area，这点比 flex 更宽松 - 如果父容器已有复杂
grid-template-areas或轨道定义，place-items可能覆盖原有对齐行为，叠加前要确认 grid 结构意图 - 不适合多子元素需不同对齐方式的场景——它是一次性统一控制所有直接子项的行列对齐
别拿 vertical-align: middle 当万能解
这个属性根本不是为“容器内居中”设计的，误用是高频坑点。
立即学习“前端免费学习笔记（深入）”；
- 它只对
display: inline、inline-block、table-cell元素有效；对block或flex子项完全无反应 - 作用对象是“行框内的基线对齐”，不是父容器中线；比如
vertical-align: middle在table-cell里才真正垂直居中，在普通div里写了也白写 - 常被误用于图片居中：其实是因为图片默认
display: inline，配合父容器text-align: center和line-height才凑效，本质不是vertical-align单独起作用 - 在 flex 或 grid 容器里给子元素设
vertical-align，纯属冗余，可删
display: flex + 明确高度，它覆盖现代浏览器且逻辑直白；需要兼容老安卓 WebView 或固定尺寸弹窗时，用 position: absolute + margin: auto；而 place-items 适合新项目单子元素场景，但得留意 grid 已有布局是否会被覆盖。 
