如何将方形SVG完美居中于方形Button内？

问题核心 #

你遇到的SVG偏移问题，根源是浏览器对<button>自带默认样式（比如默认行高、隐性内边距、边框），且之前仅添加align-items:center但未将按钮设为flex容器，导致居中规则不生效。

修复代码 #

修改CSS如下，重置按钮默认样式并启用flex布局实现精准居中：

#search-button {
    /* 启用flex布局，同时实现水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    padding: 0;
    /* 清除按钮默认干扰样式 */
    border: none;
    background: transparent;
    line-height: 1;
    cursor: pointer;
}
#search-button-svg {
    outline: 1px dotted red;
    width: 2em;
    height: 2em;
}

关键说明 #

• display: flex：将按钮转为flex容器，让justify-content（水平居中）和align-items（垂直居中）属性生效
• 重置border/background：消除按钮默认边框、背景带来的额外尺寸占用
• line-height: 1：规避按钮默认行高对内部元素垂直位置的影响
• 保留cursor: pointer：维持按钮的交互反馈逻辑

修改后，SVG会在3em×3em的按钮内以2em×2em的尺寸实现完美居中，红色轮廓会均匀环绕SVG四周，无偏移问题。

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