如何让HTML按钮内的图标居中显示？

你当前的.button规则里虽然写了align-items: center，但没有为它开启弹性布局，所以这个属性不会生效，这是图标无法居中的核心原因。

只需修改.button的CSS样式，补充弹性布局相关属性即可，调整后的完整代码如下：

.button {
    border: none;
    font-family: Arial;
    color: #FFFFFF;
    font-size: 20px;
    border-radius: 5px;
    background-color: #5865f2;
    cursor: pointer;
    /* 新增以下两个属性 */
    display: inline-flex;
    justify-content: center;
    /* 原有垂直居中属性保留，配合flex生效 */
    align-items: center;
}

.button-icon {
    position: relative;
    padding: 10px 10px;
    /* 如果还有细微的垂直对齐偏差，可以加上下面这行 */
    line-height: 1;
}

.button-text {
    padding: 10px 18px;
}

HTML代码不需要做任何修改，调整CSS后按钮内的图标和文字就会整体水平、垂直双向居中。

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