如何将 SVG 居中放在 div 中？

Question

我有一个 SVG，我试图以 div 为中心。 div 的宽度为 900 像素。 SVG 的宽度为 400 像素。 SVG 的 margin-left 和 margin-right 设置为 auto。不起作用，它就像左边距为 0（默认值）一样。

有谁知道错误是什么？

原文由 Don P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

SVG 默认是内联的。将 display: block 添加到其中，然后 margin: auto 将按预期工作。

原文由 Spadar Shut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以上答案对我不起作用。将属性 preserveAspectRatio="xMidYMin" 添加到 <svg> 标签虽然可以解决问题。需要指定 viewBox 属性才能使其正常工作。资料来源： Mozilla 开发者网络

原文由 Esger 发布，翻译遵循 CC BY-SA 3.0 许可协议