如何将方形 SVG 完美地置于方形按钮内？

Question

我尝试使用这个解决方案来帮助我将方形SVG放在方形按钮内居中（当然，水平和垂直）。主要区别在于，在解决方案中，SVG viewBox 的坐标系不同（但仍然是正方形）。另外，我指定了按钮的宽度和高度（尽管仍然是方形的）。该解决方案表明，使用

padding: 0

设置搜索按钮的样式可以解决问题。

但对我来说，SVG 显然更靠近顶部而不是底部，如红色轮廓所示。 （它也可能比右侧更靠近左侧，但这可能是一种视错觉。）

我尝试从这个示例中消除所有非必要的样式。需要什么来强制 SVG 在按钮内完美居中？

#search-button {
    align-items: center;
    width: 3em;
    height: 3em;
    padding: 0; /* one solution used this */
}
#search-button-svg {
    outline: 1px dotted red;
    width: 2em;
    height: 2em;
}

<button type="submit" id="search-button">
   <svg id="search-button-svg"
        xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 512 512">
     <path d="M416 208c0 45.9-14.9 88.3-40
         122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 
         45.3s-32.8 12.5-45.3
         0L330.7 376c-34.4 25.2-76.8 40-122.7 
         40C93.1 416 0 322.9 0
         208S93.1 0 208 0S416 93.1 416 208zM208 
         352a144 144 0 1 0
         0-288 144 144 0 1 0 0 288z"/>
   </svg>
</button>

Answer 1

我无法让建议的弹性工作，并注意你的对齐项目在你给出的代码中没有效果。

这个片段采用了老式的翻译定位方式，将 svg 设置为position:absolute，这样它对按钮没有影响。

#search-button {
  width: 3em;
  height: 3em;
  padding: 0;
  /* one solution used this */
  position: relative;
}

#search-button-svg {
  outline: 1px dotted red;
  width: 2em;
  height: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<button type="submit" id="search-button">
   <svg id="search-button-svg"
        xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 512 512">
     <path d="M416 208c0 45.9-14.9 88.3-40
         122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 
         45.3s-32.8 12.5-45.3
         0L330.7 376c-34.4 25.2-76.8 40-122.7 
         40C93.1 416 0 322.9 0
         208S93.1 0 208 0S416 93.1 416 208zM208 
         352a144 144 0 1 0
         0-288 144 144 0 1 0 0 288z"/>
   </svg>
</button>