flexbox是首选方案，需父容器设display: flex、明确高度及align-items: center；grid用place-items: center更简洁；absolute+transform适用于旧浏览器兼容；line-height和table-cell已不推荐。
Flexbox 是最直接可靠的方案
现代项目中，display: flex 配合 align-items: center 是实现按钮垂直居中的首选。它不依赖按钮尺寸、不脱离文档流、响应式天然友好。
关键点在于：父容器必须有明确高度（比如 height: 200px 或 min-height: 100vh），否则 align-items: center 没有参照基准。
- 如果父容器是
或全屏容器，记得先设html, body { height: 100%; margin: 0; } - 按钮本身无需设置
display: block或宽高——flex会自动处理内联元素的对齐 - 避免在父容器上同时用
text-align: center——它对垂直方向无效，还可能干扰 flex 的行为
Grid 适合语义清晰的单元素居中
当父容器只放一个按钮（如登录页中央按钮），display: grid + place-items: center 更简洁，代码量最少且逻辑直白。
它等价于同时设置 justify-items: center 和 align-items: center，但仅作用于直接子元素。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
place-items在 Firefox/Chrome/Safari 中支持良好，IE 11 需要前缀-ms-grid-row-align和-ms-grid-column-align - 如果父容器后续要加其他元素（比如标题+按钮），Grid 仍能保持结构清晰；而 Flexbox 在多子元素时需额外控制
flex-direction和gap - 不要给按钮设
margin: auto——Grid 下它不起作用，反而可能覆盖place-items
绝对定位 + transform 用于兼容老环境
当目标浏览器包含 IE10 或某些嵌入式 WebView（如旧版 Cordova）时，position: absolute + transform: translate(-50%, -50%) 仍是稳妥选择。
它不要求知道按钮宽高，也不依赖父容器 display 类型，但必须确保父容器有 position: relative。
- 常见错误：漏写
top: 50%和left: 50%——transform只偏移自身，不移动定位原点 - IE9 需加前缀：
-ms-transform: translate(-50%, -50%) - 若按钮内容动态变化（比如文字长度浮动），这个方案依然稳定；但频繁重排时，
transform比 flex 略轻量
line-height 和 table-cell 已不推荐
line-height 只对单行纯文本有效，按钮含 padding 或图标时极易错位；display: table-cell 语义错乱、响应式差，且在 flex/grid 成为主流后已无存在必要。
这两个方案现在只出现在遗留系统维护中，新项目应主动规避。
-
line-height设为父容器高度后，按钮内文字可能被裁切，且无法控制垂直对齐基线 -
table-cell要求父容器设display: table，会强制宽度撑满，与 flex/grid 的弹性行为冲突 - 即使为了兼容 IE8，也优先选
absolute + margin: auto（需固定按钮尺寸），而非 table 布局
align-items: center 却没意识到父容器高度由内容撑开，结果按钮仍在顶部——这时候检查 computed height 是否为 0，比反复调样式更有效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
