结论：用 flex 或 grid 实现非固定高容器垂直居中，line-height、table-cell 和绝对定位加 transform 均不可靠；flex 通过 align-items: center 天然适配动态高度，grid 用 place-items: center 更简洁，二者均基于最终布局计算，无渲染时序错位。
直接说结论：用 flex 或 grid，别碰 line-height、table-cell 或绝对定位加 transform —— 后三者在非固定高度容器里要么失效，要么行为不可控。
为什么 line-height + vertical-align 在非固定高容器里不靠谱
这个组合依赖父容器有明确的行框高度，而 line-height 本身不定义容器高度，只影响行内内容的基线位置。一旦父容器高度由内容撑开（比如多行文字、图片、子元素 flex 布局），line-height 就失去锚点，vertical-align: middle 会按“当前行框”对齐，结果是上下浮动、偏移明显。
- 常见错误现象：
.box { line-height: 200px; }+.center { display: inline-block; vertical-align: middle; }，但盒子实际高度是 320px，文字就卡在顶部附近 - 使用场景仅限于：父容器高度完全由
line-height决定，且无其他 padding/margin/border 干扰 - 兼容性没问题，但逻辑脆弱——只要加一行
padding: 10px，居中就崩
flex 实现真正可靠的非固定高居中
flex 是目前唯一能天然适配“容器高度随内容变化”的方案。它不依赖尺寸预设，也不要求父容器有固定 height，只靠轴对齐逻辑工作。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器只需两行声明：
display: flex+align-items: center（垂直）；加justify-content: center就同时水平居中 - 子元素可以是任意类型：
<div>、<code><img alt="怎么用CSS使HTML元素在非固定高度容器内居中？" >、文本、甚至多个并列元素，都不影响居中效果 - 注意别误写成
flex-direction: column后还用justify-content控制垂直——此时主轴已是竖向，justify-content才管垂直，align-items管水平 - IE10+ 支持，IE9 及以下需降级（但 2026 年基本可忽略）
- 写法：
.parent { display: grid; place-items: center; } - 它等价于
justify-items: center; align-items: center;，对单子元素场景足够 - 和
flex一样，子元素宽高未知、换行、溢出都不会破坏居中逻辑 - 兼容性略低于
flex（Chrome 68+/Firefox 63+/Safari 16.4+），但已覆盖全部主流现代浏览器
grid 的 place-items 是更简洁的替代写法
如果你只需要单个子元素居中，place-items: center 一行顶 flex 两行，语义更直白，且同样无视容器是否固定高度。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点是：非固定高容器往往意味着内容动态加载或响应式伸缩，这时候任何依赖“猜高度”的方案（比如 top: 50% + transform）都会在内容渲染完成前错位一次。只有 flex 和 grid 能等布局引擎最终计算完再对齐——这不是技巧问题，是渲染时序决定的硬约束。
