如何用Flex实现HTML元素垂直居中？简易代码示例-html教程-PHP中文网

Flex布局中垂直居中单个子元素最简方案是父容器设display: flex、align-items: center及固定高度；完全居中需justify-content与align-items配合；块级子元素可用margin: auto实现隐式居中；IE11存在align-items兼容性问题。

如何用flex实现html元素垂直居中？简易代码示例

Flex布局中用`align-items`垂直居中单个子元素

如果父容器高度已知（比如设了height: 200px），且只有一个直接子元素，最简方案就是给父容器加display: flex和align-items: center。注意：align-items只控制交叉轴对齐，对flex-direction为row（默认）的容器来说，交叉轴是垂直方向，所以生效。

容易踩的坑：

忘记给父容器设固定高度或最小高度——没有高度，align-items: center看起来没效果
子元素本身有margin或padding，会干扰视觉居中，建议先清空或用box-sizing: border-box
父容器用了flex-direction: column，此时交叉轴变成水平方向，align-items: center就变成水平居中了

<div style="display: flex; align-items: center; height: 200px; border: 1px solid #ccc;">
  <div>居中内容</div>
</div>

同时水平+垂直居中用`justify-content` + `align-items`

多数场景需要的是“真正居中”，也就是水平+垂直都居中。这时候必须两个属性一起上，缺一不可。它们分别控制主轴和交叉轴，互不干扰。

常见错误现象：

只写align-items: center，结果内容贴左——因为主轴（默认row）没做对齐，默认是flex-start
写了justify-content: center但没设height，容器高度塌缩，垂直方向没空间可居中
父容器内有多个子元素，justify-content会影响所有子项间距，不是只居中某一个

<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid #ccc;">
  <div>完全居中</div>
</div>

子元素是块级元素时，`margin: auto`也能垂直居中

当父容器是flex容器、子元素是块级元素（比如div）时，给子元素设margin: auto会自动填满主轴和交叉轴的剩余空间，实现居中。这个技巧不依赖justify-content或align-items，更“隐式”但有效。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

使用限制很明确：

只适用于单个子元素，多个子元素时margin: auto会让它独占一行/一列
子元素不能是inline元素（如span），必须是块级或设了display: block
父容器必须是flex容器，且不能设flex-wrap: wrap，否则行为不可控

<div style="display: flex; height: 200px; border: 1px solid #ccc;">
  <div style="margin: auto;">靠margin居中</div>
</div>

IE11兼容性下`align-items`可能失效

IE11对flex的支持有bug，尤其在父容器设了min-height而非height时，align-items: center经常不生效。这不是写法错，而是浏览器缺陷。

临时绕过方案（不用JS）：

把min-height换成height（如果业务允许固定高度）
改用display: -ms-flexbox前缀 + 对应的-ms-flex-align: center（仅IE11）
退化方案：用position: absolute + transform: translate(-50%, -50%)，但需额外加top: 50%和left: 50%