主内容水平居中用 margin: 0 auto（需设 width/max-width 且保持块级流），视口居中用 Flexbox（父容器设 display: flex、justify-content: center、align-items: center 及 min-height: 100vh），禁用废弃的 和 align="center"。

主内容标签（如

、

、

）本身不能靠 text-align: center 居中——它只影响内部文字，不移动标签自身位置。

用 margin: 0 auto 让定宽主内容水平居中

这是最常用也最稳妥的方案，适用于普通文档流中的块级主容器。

• 必须给主标签显式设置 width 或 max-width（比如 width: 800px 或 max-width: 960px），否则默认 100% 宽，auto 外边距无空间可分
• 确保它没被设成 display: inline、float 或 position: absolute，否则 margin: 0 auto 失效
• 父容器不需要额外样式，但需是常规块级上下文（比如 或一个普通
  ）
• 示例：

  .main-content {
    width: 900px;
    margin: 0 auto;
  }

用 Flexbox 实现主内容水平+垂直居中

当你要把整个

在视口中央（比如登录页、空状态页），Flexbox 是首选。
• 在父容器（通常是 或一个全高 wrapper）上设 display: flex，再加 justify-content: center 和 align-items: center
• 父容器必须有明确高度，否则垂直居中无效；常见做法是 min-height: 100vh
• 注意：如果
  内容很多，超出视口时可能被裁剪，建议加 overflow: auto 或改用 justify-content: flex-start 配合内边距
• 示例：

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
  }
  main {
    width: 90%;
    max-width: 600px;
  }

避免用 标签或 align="center" 属性

这两个都是已废弃的 HTML 方式，现代浏览器虽仍支持，但语义错误、不可维护、且无法控制垂直方向。


Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
• 不是语义化标签，W3C 已移除，HTML5 中完全不合法
• align="center" 属性（如
  ）同样被弃用，CSS 才是正确抽象层
• 它们对 Flexbox/Grid 父容器内的子元素完全无效，容易造成样式冲突和调试困难

复杂点常被忽略：主内容居中 ≠ 文本居中

很多人写完 margin: 0 auto 还发现文字靠左，就顺手加 text-align: center ——这其实混淆了两个目标：一个是让容器自己居中，一个是让容器里的文字居中。前者影响布局流，后者只影响行内渲染。如果你只需要容器居中，别碰 text-align；如果还要文字居中，那得单独加在主标签上，且它不会影响子块级元素的位置。