使用wrapper div设置按钮文本居中不生效的解决方法

问题原因 #

• 按钮设置了display: flex后，内部文本属于flex容器的直接子项，不会响应text-align: center规则，且你没有配置flex布局的对齐属性
• 按钮同时设置了固定高度height: 33px和上下左右各10px的内边距，内容垂直方向的可用空间被挤压，会加重偏移问题
• 外层.text-center的text-align: center只对行内、行内块元素生效，本身因为你给按钮加了margin: 10px auto，按钮自身在父容器的水平居中已经生效，出问题的是按钮内部的文本对齐

修复方案 #

直接修改.pass-btn的样式，补充flex对齐属性，同时调整内边距适配固定高度，修正后完整代码如下：

.text-center{
    text-align: center;
}

.pass-btn{
    background: linear-gradient(90deg, #03DABB 0%, #03DA9A 100%);
    border-radius: 3px;
    width: 187px;
    height: 33px;
    border: none;
    text-transform: uppercase;
    margin: 10px auto;
    /* 调整内边距，去掉上下内边距避免和固定高度冲突 */
    padding: 0 10px;
    display: flex;
    /* 新增flex对齐属性，分别实现水平、垂直居中 */
    justify-content: center;
    align-items: center;
}

对应的HTML结构不需要调整，保持原有写法即可：

<div class="text-center">
    <button class="pass-btn">get pass</button>
</div>

可选非flex方案：如果不需要使用flex布局，可直接删除.pass-btn里的display: flex声明，补充文本对齐和行高属性实现居中，样式片段如下：

.pass-btn{
    /* 其余原有属性保留，删除display: flex */
    padding: 0 10px;
    text-align: center;
    line-height: 33px; /* 行高和按钮高度一致，实现单行文本垂直居中 */
}

内容的提问来源于stack exchange，提问作者ek2466