如何在Button内居中SVG？align-items等属性无效求助

问题根源 #

1. 按钮未设置box-sizing: border-box，width:24px + padding:1em会让按钮实际尺寸远大于设置的宽高，导致SVG布局错位。
2. SVG使用position:absolute但未配置定位参数，脱离文档流后父级的flex居中属性完全失效，默认停靠在左上角。
3. 多余的嵌套div增加了布局复杂度，完全没必要。

修正后的代码 #

CSS

.buttonyo {
  position: absolute;
  top: 60px;
  width: 24px;
  height: 24px;
  padding: 1em;
  border: .1875em solid;
  box-sizing: border-box; /* 让padding包含在宽高范围内 */
  display: flex; /* 按钮自身作为容器居中内容 */
  align-items: center;
  justify-content: center;
}

.svging {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

HTML

<div>
  <button type="button" class="buttonyo">
    <svg class="svging" viewBox="0 0 24 24">
        <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path>
    </svg>
  </button>
</div>

关键调整说明 #

• box-sizing: border-box：确保按钮的宽高包含padding和border，避免实际尺寸超出预期。
• 按钮直接设置flex布局：利用flex的居中属性直接控制内部SVG的位置，无需额外嵌套容器。
• 移除SVG的position:absolute：让SVG回到文档流中，继承父级的居中布局。
• 让SVG占满按钮可用空间：通过width:100%;height:100%确保SVG完全适配按钮容器，同时保持 viewBox 比例不变形。

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