现代项目HTML模板整体居中首选display: flex或display: grid；text-align: center仅对行内元素有效，margin: 0 auto仅适用于定宽块级元素的水平居中，二者均不适用于页面整体居中。
直接说结论：HTML模板整体居中，现代项目首选 display: flex 或 display: grid，别碰 text-align: center 或 margin: 0 auto 去“套整个页面”——它们根本不是为这个设计的。
为什么 text-align: center 对整个页面无效
它只作用于行内内容（span、文本、img），对 div、section 这类块级容器完全没反应。常见错误是给 body 加了 text-align: center，结果页面布局纹丝不动，还以为 CSS 失效了。
- 适用场景：让段落文字或图标在父容器内水平居中
- 不适用场景：让
<main>或<div class="app">整体在视口居中 - 额外干扰：如果父容器是
flex或grid，text-align会被忽略
margin: 0 auto 只能水平居中块级元素，且必须满足三个条件
它不是“页面居中方案”，而是“定宽块级元素在父容器中水平居中”的专用工具。强行用它撑起整个页面，会立刻掉坑里。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须设置明确宽度（
width或max-width），不能是100%或未设值 - 元素必须处于普通文档流（不能是
position: absolute或float） - 父容器宽度要大于子元素，否则左右 margin 都是 0，毫无居中效果
- 它对垂直方向完全无感——加
margin: auto也无效，浏览器不计算上下 auto margin
真正可靠的页面整体居中：Flexbox 方案
给最外层容器（比如 body 或一个包裹全部内容的 <div id="root">）设为 flex，再控制轴对齐。这是目前兼容性、可维护性、语义性最平衡的选择。
立即学习“前端免费学习笔记（深入）”；
- 必须确保
html和body高度为100%：html, body { height: 100%; margin: 0; } - 根容器需有高度依据，常用
min-height: 100vh或height: 100vh - 代码极简：
display: flex; justify-content: center; align-items: center; - 注意：子元素若设了
margin: auto，在 flex 容器里会被忽略——flex 的对齐规则优先级更高
更简洁但要求稍高的 Grid 方案
place-items: center 是二维居中的语法糖，一行顶 Flexbox 两行，但对浏览器版本有硬性要求（Chrome 57+/Firefox 52+/Safari 10.1+），旧 Android WebView（4.4 以下）不支持。
- 同样依赖
html, body { height: 100%; margin: 0; } - 根容器设
display: grid; place-items: center; min-height: 100vh; - 比 Flexbox 少一个维度控制自由度（比如想只垂直不水平，Grid 得拆用
justify-items和align-items） - 容易被忽略的点：如果页面内容本身触发了滚动，
100vh可能导致底部被截断，此时改用min-height: 100vh更稳妥
