直接给button设display: flex在低版本浏览器和小程序中常失效，因其是受限弹性容器；应重置padding: 0、显式设height、line-height: normal，并加display: flex、justify-content: center、align-items: center。
flex 布局是目前最可靠、兼容性好、写法简洁的方案，但直接给 <button> 加 display: flex 往往不起作用——不是布局逻辑错了，而是按钮自带样式干扰了。
为什么 button 默认不响应 justify-content / align-items
浏览器对 <button> 有强默认样式：它内部是一个匿名 inline box，且默认 line-height 和 padding 共同决定文字位置。即使你给 button 设了 display: flex，若没重置内边距或行高，justify-content 和 align-items 仍可能被视觉上“掩盖”。
- Chrome/Firefox/Safari 对
<button>默认设了上下padding（通常约10px），左右约16px，这会挤压 flex 项的可用空间 - 部分旧版微信小程序中，
<button>还会忽略display: flex，必须用view包裹再套一层 flex 容器 -
line-height若显式设置且与 height 不匹配，会覆盖 flex 垂直居中效果
正确写法：button 内部 flex 居中三步走
不用 wrapper，直接操作 button 元素本身，关键在清底、设尺寸、启 flex：
- 显式设置
padding: 0—— 否则 flex 的align-items: center会在 padding 区域内居中，而非整个 button 可视区域 - 指定
height和line-height: normal（或干脆不设line-height）—— 避免 line-height 拉高内容区，干扰垂直计算 - 加
display: flex; justify-content: center; align-items: center;—— 主轴和交叉轴同时居中
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
height: 44px;
width: 120px;
border: none;
background: #007AFF;
color: white;
font-size: 16px;
}
微信小程序里 button 文字居中的特殊处理
小程序的 <button> 组件渲染层更封闭，display: flex 在某些基础库版本下无效，推荐改用 <view> 模拟按钮：
- WXML 中用
<view class="btn-wrapper" bindtap="handleClick">提交</view>替代原生<button> - WXSS 中对
.btn-wrapper设置display: flex; justify-content: center; align-items: center;，并控制宽高、背景、圆角等 - 务必加
padding: 0和box-sizing: border-box，否则 rpx 单位下容易因默认 padding 偏移
注意：若仍要用原生 <button>，必须配合 padding: 0 + line-height: 1 + height 显式设定，且需测试 iOS/Android 渲染一致性。
替代方案对比：什么时候不该用 flex
flex 是首选，但存在边界情况：
- 单行纯文本按钮，且高度固定 → 直接用
text-align: center+line-height等于 height 更轻量（无 flex 渲染开销） - 需要兼容 IE10 以下 → 改用
position: absolute+transform: translate(-50%, -50%)，但需父容器position: relative - 按钮含图标+文字混合布局 → flex 仍是唯一能自然对齐、换行可控的方案；
vertical-align或line-height在图文混排时极易错位
真正容易被忽略的点是：button 的 border 和 outline 会影响实际尺寸计算，调试时建议临时加 outline: 1px solid red 查看真实边界。
