最轻量且兼容性最好的方式是给父容器加 text-align: center；text-align 是容器属性，只对行内子元素有效，不能作用于自身；需确保父容器为块级、有明确宽度且未被 float 或 flex 等破坏文档流。

直接给父容器加 text-align: center 就能解决，这是最轻量、兼容性最好、也最容易写对的方式。

为什么不能给 @#@#@#@#@#@#@#@#@#@0

Flex 布局适合需要垂直居中或响应式控制的场景

如果不仅要水平居中，还要上下居中（比如 banner 区、登录页 logo），或者父容器高度固定/视口级，display: flex 是更可控的选择。但别直接套在 上——它会让所有直系子元素变成 flex item，破坏原有结构。

• 父容器需设 display: flex; justify-content: center;（仅水平）或加 align-items: center;（双向）
• 若要垂直居中，父容器必须有高度参照，例如 height: 100vh 或 min-height: 300px；否则 align-items: center 没空间可居中，图片仍贴顶
• 注意：图文混排时，
  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  和 会被当成两个独立 flex item，建议统一包进一个子
  再居中

  真正容易被忽略的是父容器的状态：哪怕写对了 text-align: center，只要父容器被 float、position: absolute 或意外的 display: inline-block 缩窄了宽度，居中就会偏移。调试时先检查父容器是否真“够宽”且“没脱流”，比反复改 样式更高效。

  

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！