React项目中react-icon图标无法在按钮内垂直居中如何解决？

你设置的align-items: center未生效的核心原因是：align-items仅对Flex、Grid布局的容器生效，原生button元素默认不是Flex容器，所以该属性不会触发作用，和icon自带内边距无关。

修复步骤 #

1. 调整按钮CSS，开启Flex布局 #

修改你的.ButtonToTop样式如下，新增Flex布局相关属性，同时补充圆形按钮必备的样式、重置浏览器默认按钮样式：

.ButtonToTop{
    /* 新增Flex布局配置，实现子元素水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 原有属性保留 */
    position: fixed; 
    width: 50px;
    right: 10px;
    bottom: 40px;
    height: 50px;
    font-size: 33px;
    z-index: 1;
    cursor: pointer;
    background-color: #967A50;
    color: #10255A;
    /* 补充圆形按钮、默认样式重置 */
    border-radius: 50%;
    border: none;
    outline: none;
    /* 可选：统一行高，避免行高继承导致的细微偏移 */
    line-height: 1;
}

2. 可选：微调图标偏移 #

如果修改后仍有肉眼可见的细微上下偏移，属于部分图标设计基线的正常差异，直接给图标组件加少量偏移修正即可：

return (
    <button onClick={ScrollToTop} className="ButtonToTop" aria-hidden="true" style={{display: isVisible ? 'inline' : 'none'}}>
        <BiArrowToTop style={{ transform: 'translateY(1px)' }}/>
    </button>
)

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