按钮内文字居中应设 button { display: flex; justify-content: center; align-items: center; }，避免 line-height 与 align-items 冲突；ie11 需降级为 text-align + padding 或绝对定位。
直接用 display: flex + justify-content: center + align-items: center，三行 CSS 就够，但必须写对地方、设对高度。
父容器必须设 display: flex，按钮本身不用动
按钮文字居中不是给 <button></button> 加样式，而是控制它的父容器（通常是 button 自身，因为 button 默认是 inline 元素，但渲染为 replaced element，内部文本流受自身盒模型约束）。所以最稳妥做法是：把 button 当作 flex 容器用。
-
button { display: flex; justify-content: center; align-items: center; }—— 这样 button 内部的文本（或子元素）就自动水平+垂直居中 - 别写成
button span { ... }或给 button 加text-align: center单独配line-height，那只是“碰巧有效”，且一换字体大小或加图标就错位 - button 默认
display: inline-block，设display: flex完全合法，不影响表单行为
高度不固定时，align-items: center 仍生效，但需防内容溢出
按钮常有 padding 和 font-size 动态变化，align-items: center 能自适应，但前提是 button 有明确的块级高度上下文。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 如果 button 没设
height或min-height，又没足够 padding，align-items: center仍有作用——它居中的是内容盒（content box），不是视觉中心；但人眼感知可能偏上，尤其文字小、padding 少时 - 推荐显式设
padding: 12px 24px或min-height: 40px，让交叉轴有足够空间可“居中” - 避免同时设
line-height和align-items: center，两者冲突：line-height 会撑高行框，flex 的 align-items 则按 content box 居中，结果反而错位
兼容 IE11？别用 flex，改用绝对定位 + transform
IE11 对 display: flex 在 button 上的支持不稳定（尤其 button 内部文本渲染异常），老项目需降级。
- 写法：
button { position: relative; } button::before { content: attr(data-text); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }，再把原 button 文字清空或用font-size: 0 - 更简单粗暴的替代：
button { text-align: center; line-height: normal; padding: 12px 24px; }，然后靠 padding 均匀撑开，视觉上接近居中（虽非严格垂直居中，但用户感知无差别） - 注意：IE11 不支持
align-items在 inline-level 元素（如 button）上可靠工作，实测中 flex 方案在部分版本会忽略垂直居中
真正容易被忽略的点是：button 的默认 vertical-align: baseline 会影响它在行内布局中的位置，但这和内部文字居中无关；如果你发现整个按钮在父容器里“挂得偏下”，那是 vertical-align 的事，不是文字没居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
