主内容水平居中用 margin: 0 auto（需设 width/max-width 且保持块级流），视口居中用 Flexbox（父容器设 display: flex、justify-content: center、align-items: center 及 min-height: 100vh），禁用废弃的 和 align="center"。
主内容标签（如 这是最常用也最稳妥的方案，适用于普通文档流中的块级主容器。<main></main>、<section></section>、<div>）本身不能靠 <code>text-align: center 居中——它只影响内部文字，不移动标签自身位置。
用
margin: 0 auto 让定宽主内容水平居中
width 或 max-width（比如 width: 800px 或 max-width: 960px），否则默认 100% 宽，auto 外边距无空间可分display: inline、float 或 position: absolute，否则 margin: 0 auto 失效 或一个普通 <div>）
<li>示例：<pre class='brush:php;toolbar:false;'>.main-content {
width: 900px;
margin: 0 auto;
}</pre></li>
<h3>用 Flexbox 实现主内容水平+垂直居中</h3>
<p>当你要把整个 <code><main></main> 在视口中央（比如登录页、空状态页），Flexbox 是首选。
- 在父容器（通常是
或一个全高 wrapper）上设display: flex，再加justify-content: center和align-items: center - 父容器必须有明确高度，否则垂直居中无效；常见做法是
min-height: 100vh - 注意：如果
<main></main>内容很多，超出视口时可能被裁剪，建议加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; }
避免用 <center></center> 标签或 align="center" 属性
这两个都是已废弃的 HTML 方式，现代浏览器虽仍支持，但语义错误、不可维护、且无法控制垂直方向。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
-
<center></center>不是语义化标签，W3C 已移除，HTML5 中完全不合法 -
align="center"属性（如<div align="center">）同样被弃用，CSS 才是正确抽象层 <li>它们对 Flexbox/Grid 父容器内的子元素完全无效，容易造成样式冲突和调试困难</li> <h3>复杂点常被忽略：主内容居中 ≠ 文本居中</h3> <p>很多人写完 <code>margin: 0 auto还发现文字靠左，就顺手加text-align: center——这其实混淆了两个目标：一个是让容器自己居中，一个是让容器里的文字居中。前者影响布局流，后者只影响行内渲染。如果你只需要容器居中，别碰text-align；如果还要文字居中，那得单独加在主标签上，且它不会影响子块级元素的位置。
