将 SVG 居中放在 div 中

Posted 2023-03-06

【中文标题】将 SVG 居中放在 div 中

【英文标题】：centering an SVG inside a div

【发布时间】：2017-11-07 21:25:24

【问题描述】：

我想在 position:fixed div 中显示 SVG 图像。我有

<div class="main">
  <svg class="svg" viewBox="0 0 180 100">
    <rect   fill="#003300"></rect>
  </svg>
</div>

风格

.main 
  position:fixed;
  left: 100px;
  height: 100%;
  width:100%;
  background: #33AAAA;


.svg 
  display: block;
  height: 100%;
  width: 100%;
  position:static;

我想将 SVG 水平和垂直居中。我有一个奇怪的行为。更改浏览器窗口的大小，表明当 svg 小于可用宽度时，它被奇怪地放置。例如： 左边比右边多。

Codepen（包括 CSS 重置）：Codepen

【问题讨论】：

你还剩：100px；在主课上。这就是为什么你的 svg 左边是空的。

这不是重点。我想将深绿色矩形放在浅色矩形的中心。也许左派有事可做……

答案可能就在那里https://***.com/questions/41822510/center-an-svg-inside-a-div?rq=1 我正在测试它

How do I center an SVG in a div?的可能重复

【参考方案1】：

看起来很像，因为您的main 类中有left: 100px。如果你把它拿出来，它就会正确居中。

这是应该工作的主要类：

.main 
  position:fixed;  
  left:100px;
  height: 100%;
  right: 0;
  top:0;
  bottom:0;
  background: #33AAAA;

【讨论】：

是的，但我不想让浅绿色填充整个视口。我想在左边留一些空间来做其他事情

在这种情况下，请查看我编辑的答案。如果您将 main 类调整为该类，那应该可以工作。

【参考方案2】：

您将宽度设置为 100%，然后将其移动 100 像素。宽度仍按 100% 宽度计算。要以您想要的方式居中，您需要从宽度中减去 100px 或以不同的方式嵌套。

.main 
  position:fixed;  
  left:100px;
  height: 100%;
  width:calc(100% - 100px);
  background: #33AAAA;

【讨论】：

谢谢。我正在弄清楚:)