margin: 0 auto仅对设width的块级元素有效；Flexbox用justify-content和align-items可水平垂直居中；Grid用place-items: center更声明式；需注意父容器尺寸、定位及浏览器兼容性。
用 margin: 0 auto 居中块级元素（最常用但有限制）
这个方法只对设置了明确 width 的块级元素生效，比如 <div>、<code><section></section>。它本质是把左右外边距设为“自动分配剩余空间”，所以必须有可分配的宽度余量。
- 元素必须是块级（
display: block或默认行为） - 必须显式设置
width（如width: 300px或width: 80%） - 父容器不能是
display: flex或display: grid，否则会失效 - 不适用于行内元素（如
<span></span>），也不管垂直居中
<div style="width: 300px; margin: 0 auto;">我水平居中了</div>
用 Flexbox 实现真·水平+垂直居中（推荐现代布局）
Flexbox 是 HTML5 布局中最可靠、语义最清晰的居中方案，尤其适合响应式场景。只要父容器启用 display: flex，子元素就能一键居中。
- 父容器加
display: flex+justify-content: center（水平） - 再加
align-items: center（垂直），两者缺一不可 - 子元素无需设宽高，也无需知道自身尺寸
- 注意：若父容器高度为
auto，垂直居中可能“看不见效果”，需确保父容器有高度（如min-height: 100vh）
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <p>完全居中</p> </div>
用 Grid 实现单行/单列居中（适合结构化容器）
CSS Grid 更适合已有明确网格意图的布局，比如卡片列表、登录框等固定结构区域。它比 Flexbox 更“声明式”，但学习成本略高。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid - 用
place-items: center一行搞定水平+垂直居中（等价于justify-items: center; align-items: center） - 或者更精细地控制：用
grid-template-columns: 1fr auto 1fr+justify-content: center - 不兼容 IE11 及更旧浏览器（若需支持，慎用）
<div style="display: grid; place-items: center; min-height: 100vh;"> <button>居中按钮</button> </div>
居中时容易被忽略的兼容性与陷阱
很多居中失败不是写法错，而是忽略了上下文约束：
-
text-align: center只影响行内内容（如文字、<img alt="html5布局代码怎么居中元素_html5布局代码元素居中实现法【步骤】" >、<span></span>），对块级子元素无效 - 使用
position: absolute+transform: translate(-50%, -50%)时，父容器必须是position: relative，否则会相对于视口定位 - Flex/Grid 在移动端 Safari 旧版本（iOS min-height: 100vh 支持异常，建议改用
height: 100vh或 JS 补偿 - 所有居中方案都依赖父容器的尺寸是否“可计算”，如果父容器高度塌陷（比如子元素全浮动），先解决塌陷问题再谈居中
真正卡住人的，往往不是“怎么写”，而是“为什么写了没反应”——多检查父容器的 display、尺寸、定位这三层。
