推荐使用 display: flex 实现多行文字水平垂直居中，通过 justify-content: center 和 align-items: center 即可，兼容 ie10+ 及主流移动端；老项目需支持 ie9- 时才用 table-cell；grid 和 absolute + transform 为备选方案。

多行文字在HTML元素内水平+垂直居中，不能靠 line-height 拉高（只对单行有效），也不能只写 text-align: center（它不管垂直）。现代项目直接用 display: flex 最稳，兼容性已覆盖 IE10+、所有主流移动端；老项目若需支持 IE9 及以下，才考虑 display: table-cell 方案。

flex 实现多行文字居中（推荐首选）

父容器设为 flex，子元素是纯文本或带换行的块级元素（如 <p></p>、<div>），无需知道内容行数或高度。 <ul> <li> <code>display: flex 开启弹性布局

justify-content: center 控制水平居中

align-items: center 控制垂直居中

若文字本身需要换行对齐，给子元素加 text-align: center 和 max-width 防溢出

示例：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

.container {
  height: 200px;
  width: 300px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  text-align: center;
  max-width: 260px;
  margin: 0;
}

注意：align-items: center 对文本节点本身生效，不是“让文字基线居中”，而是把整个文本块当一个 flex item 居中——这正是我们想要的效果。

table-cell 实现（兼容 IE8+，但有隐性限制）

适合无法使用 flex、又必须支持 IE8/9 的遗留系统。原理是把容器模拟成表格单元格，靠 vertical-align: middle 垂直居中。

• 父容器必须设固定 height（百分比高度无效）
• 父容器 display: table-cell，同时加 vertical-align: middle 和 text-align: center
• 不能和 float、position: absolute 共存；IE7 及以下不支持
• 子元素不能是 <span></span> 这类行内元素（需包裹一层 <div> 或设 <code>display: block）

  示例：

  .container {
    height: 200px;
    width: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  Grid 实现（简洁但兼容性略窄）

  display: grid + place-items: center 是最简写法，语义清晰，但 Safari 10.1 之前不支持 place-items，需降级写 justify-items: center; align-items: center。

  • 仅需两行声明，无方向干扰（不像 flex 默认 row）
  • 不依赖子元素是否块级，<span></span> 直接套也能居中
  • 若容器已有 grid 子项，place-items 会影响所有子项，需谨慎

  示例：

  .container {
    height: 200px;
    width: 300px;
    border: 1px solid #ccc;
    display: grid;
    place-items: center;
  }

  absolute + transform（通用但需额外 wrapper）

  适用于无法改父容器 display 类型的场景（比如第三方组件封装死），但必须确保父容器有定位上下文（position: relative）。

  • 子元素设 position: absolute，top: 50% + left: 50%
  • 用 transform: translate(-50%, -50%) 回拉自身宽高的一半
  • 文字内容需包裹在子元素内（不能直接写在绝对定位元素里，否则换行会错位）
  • 父容器若高度不固定，此法失效；且不利于响应式缩放

  示例：

  .container {
    position: relative;
    height: 200px;
    width: 300px;
    border: 1px solid #ccc;
  }
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 260px;
  }

  真正容易被忽略的是：多行文字居中 ≠ 让每行文字基线对齐，而是让整段文字作为一个视觉整体居中。flex 和 grid 天然满足这点；而 vertical-align: middle 在非 table-cell 环境下对普通 div 完全无效——别试了。