<center> 标签已废弃，应改用 text-align: center（仅对行内内容有效）或 display: flex（对任意子元素均有效且支持垂直居中），避免在 flex/grid 容器中冗余使用。
<center> 标签在 HTML5 中已被废弃，浏览器虽仍能渲染，但会触发控制台警告，且语义错误、可访问性差、SEO 不友好——别用它。
text-align: center 是最直接的替代方案
对纯文本、<span>、<a> 或 display: inline-block 的图片，只需在父容器上设置 text-align: center 即可水平居中：
- 必须写在父元素上，不是子元素上
- 只影响行内内容（包括默认
inline的<img>） - 若父容器是
display: flex或display: grid，该声明基本失效——flex/grid 会接管对齐逻辑 - 多行文本也能居中，无需额外处理
为什么不能对块级元素用 text-align: center
text-align 不控制块级子元素的位置，只控制其内部的“行内流”。例如：
<div style="text-align: center;"> <p>这段文字会居中</p> <div style="width: 200px; background: #eee;">这个 div 不会居中</div> </div>
- 上面的
<p>是行内内容的容器，所以文字居中 - 但嵌套的
<div>是块级元素，text-align对它完全无效 - 要居中这个
<div>，得用margin: 0 auto（需定宽）或display: flex等方案
现代项目里更推荐用 Flexbox 居中文本容器
当你要居中的不只是文本，而是包含文本+按钮+图片的完整模块时，display: flex 更可控、更一致：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid #ccc;"> <div>任意内容都能居中</div> </div>
- 不依赖子元素类型：
<div>、<img>、<button>全部生效 - 自动支持垂直居中，无需计算
line-height或padding - 父容器需有明确高度（如
height: 100vh）才能看到垂直效果 - 注意副作用：开启后，子元素的
float、vertical-align和部分margin行为会失效
真正容易被忽略的是上下文——text-align: center 在普通文档流中管用，在 flex/grid 容器里就形同虚设；而很多人改了父容器为 flex 却忘了删掉多余的 text-align，结果代码冗余还可能引发意外交互。
