如何完美居中按钮内的加减展开折叠符号？

我做了一个用于展开/折叠列表的按钮，加号代表展开，减号代表折叠，但加减符号在按钮里垂直方向偏下，没法完全居中。

当前效果：

期望效果：

我的CSS代码：

.accordion-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: white;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

.plus::before {
    content: '\002B';
    font-weight: bold;
    font-size: 24px;
}

.minus::before {
    content: '\2212';
    font-weight: bold;
    font-size: 24px;
}

相关HTML/TypeScript代码：

const [isExpanded, setIsExpanded] = useState<boolean>(false);

const handleAccordionClick = () => {
        setIsExpanded(!isExpanded);
    };

return (
    <button
     className={`accordion-button ${isExpanded ? 'minus' : 'plus'}`}
                    onClick={handleAccordionClick}></button>
);

解决方法 #

问题出在按钮的text-align: right会让符号靠右，同时伪元素的字体大小和按钮本身的行高、对齐方式不匹配，导致垂直偏移。可以通过以下两种方式实现完美居中：

方法1：使用Flex布局（推荐）

直接给按钮添加Flex属性，一键实现水平+垂直居中，兼容性好且代码简洁：

.accordion-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: white;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: bold;
    /* 替换原text-align: right，用flex实现居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus::before {
    content: '\002B';
    font-weight: bold;
    font-size: 24px;
}

.minus::before {
    content: '\2212';
    font-weight: bold;
    font-size: 24px;
}

方法2：调整行高与对齐方式

如果不想用Flex，可通过行高和垂直对齐属性修正：

.accordion-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: white;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: bold;
    text-align: center; /* 改为居中对齐 */
    line-height: 32px; /* 行高等于按钮高度，实现垂直居中 */
}

.plus::before, .minus::before {
    font-weight: bold;
    font-size: 24px;
    line-height: 1; /* 覆盖按钮行高，避免符号过大导致偏移 */
    vertical-align: middle; /* 修正字体基线对齐 */
}

两种方法都能解决垂直偏移问题，Flex布局更符合现代前端开发的最佳实践。

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