如何修复SVG导致CSS Grid布局错乱、元素无法居中的问题

问题现象 #

将SVG元素插入CSS Grid布局时出现两类异常：

• SVG元素无法居中显示
• SVG会破坏Grid原有布局结构
  目标效果：播放SVG图标和纯文本「Play」的展示效果完全一致。

异常原因 #

• 居中容器.center_children仅设置了水平居中属性justify-content: center，缺少垂直居中配置：纯文本受行高默认规则影响视觉上近似居中，但SVG作为替换元素无默认行高对齐特性，会出现位置偏移
• 包裹SVG的.play容器未设置明确尺寸约束：SVG设置width: 100%; height:100%时，会按照自身viewBox比例计算默认尺寸撑大父容器，打乱Grid预设的2fr 1fr行高分配规则
• SVG默认是inline行内元素，会保留基线对齐的底部间隙，进一步干扰布局计算

修复代码 #

修改后的CSS #

.body { 
  background-color: hsl(0,0%,10%); 
  color: white; 
  font-size: 32px; 
}
.center_children { 
  display: flex; 
  justify-content: center; 
  align-items: center; /* 补全flex容器垂直居中能力 */
}
.timer {
  width: 12rem; 
  height: 12rem; 
  border-radius: 50%;
  background-color: hsl(0, 50%, 50%); 
  display:grid; 
  grid-template-rows: 2fr 1fr; 
  gap: 1.5rem;
}
/* 给play容器设置和当前字号匹配的尺寸，和文本占位大小一致 */
.play {
  width: 1em;
  height: 1em;
}
/* 消除SVG默认行内元素的基线间隙 */
.play svg {
  display: block;
}

HTML部分 #

原有HTML结构无需额外修改，SVG的viewBox和多边形路径配置可保持不变。

修复效果 #

修复后SVG会和纯文本「Play」一样，在Grid第一行区域内水平+垂直完全居中，Grid的两行高度严格按照2fr 1fr分配，不会出现布局被撑坏的问题。

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