按钮设为块级+margin: 0 auto常失败，是因为button默认是inline-block元素，不响应margin: auto；必须同时满足display: block、明确宽度（非100%）、父容器宽度大于按钮宽度三条件才生效。
按钮设为块级 + margin: 0 auto 为什么常失败？
直接写 margin: 0 auto 给 <button></button> 标签，基本无效——因为 <button></button> 默认是 inline-block 元素，不响应 margin: auto 的块级居中逻辑。
真正生效的前提有三个：display: block（或 inline-flex）、明确宽度（不能是 100% 或未设）、父容器宽度大于按钮宽度。
- 错误写法：
button { margin: 0 auto; }→ 无效果 - 正确写法：
button { display: block; width: fit-content; margin: 0 auto; } - 若用固定宽，比如
width: 120px，也必须配display: block，否则仍不居中 - 注意：
width: 100%会让按钮撑满父容器，此时margin: auto失效——它只对“有收缩空间”的块级元素起作用
用 Flex 实现水平+垂直居中要防哪些坑？
这是目前最主流、最可靠的方案，但漏掉任一条件就会“看起来没居中”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键不是给按钮加样式，而是控制它的**直接父容器**：
- 父容器必须设
display: flex - 必须设
justify-content: center（水平）和align-items: center（垂直） - 父容器得有**可感知的高度**：比如
min-height: 100vh、height: 400px，或至少有内容撑开；空 div 没高度，align-items: center就没参照 - 按钮本身无需改
display或设宽高，flex 会自动处理 - 别在父容器上同时写
text-align: center——它不影响 flex 子项，还可能干扰其他内联内容
Grid 的 place-items: center 为什么有时“动不了”？
place-items: center 是 justify-items: center 和 align-items: center 的简写，但它只对 Grid 容器的直接子项生效，且依赖容器自身渲染行为。
- 父容器必须设
display: grid，缺一不可 - 如果按钮是唯一子元素，
place-items: center能一步到位；但若父容器里还有别的元素（比如标题、描述），它们也会被一起居中——这不是 bug，是设计如此 - 容器若没有显式高度，
align-items: center在垂直方向可能“看不出效果”，尤其当内容很短时；加min-height: 100vh最稳 - 别和
float、position: absolute混用——Grid 布局下这些会破坏文档流，导致对齐失效
表格单元格里按钮怎么居中？别碰 vertical-align 在按钮上
在 <td> 里放按钮，常见错觉是“按钮自己没居中”，其实问题出在 <code><td> 的对齐控制逻辑上。
<ul>
<li>
<code>vertical-align: middle 必须写在 td 上，不是 button 上——该属性对块级元素无效，且由父容器决定子项对齐方式
td 必须有足够高度才能体现居中效果：要么设 height: 48px，要么用 padding: 12px 0 撑开内容区td 变成 flex 容器：td { display: flex; align-items: center; justify-content: center; }，这样不用猜 baseline、不依赖 line-height，图标+文字也能稳居中td 设了 display: flex，vertical-align 就完全失效，二者不可共存margin: auto 就是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
