响应式 SVG，垂直和水平居中，同时保持其纵横比/原始大小答案

【问题标题】：Responsive SVG that is both vertically and horizontally centered while keeping its aspect ratio / original size响应式 SVG，垂直和水平居中，同时保持其纵横比/原始大小
【发布时间】：2021-06-19 08:16:51
【问题描述】：

我尝试为我的 SVG 实现以下目标：

响应式（我使用viewBox，svg 元素上没有宽度/高度，效果很好）
垂直和水平居中（硬部分）
居中 SVG 应保持其原始纵横比/纵横比

我做了一个 jsfiddle 演示用于说明（使用内置 SO 代码 sn-p 更容易导航）： https://jsfiddle.net/McTell/gjx9pcon/3/ （请确保在设置下将编辑器布局设置为正确的结果，这样可以更轻松地通过拖动平铺分隔线来更改画布大小）

如您所见，画布位于最顶部，并且水平填充视口的整个宽度，这使其在技术上水平居中。此外，如果您单击按钮，黑色矩形将向下移动，离开画布一半，这是我想要的行为。

现在我尝试通过添加以下 CSS（在 jsfiddle 上被注释掉）来引入居中垂直对齐：

svg {
  position:fixed;
  height:100%;
  width:100%;
}

这将使整个 SVG 画布处于垂直和水平居中的位置，但它会破坏 SVG 的原始边界（正如您可以通过背景颜色和红色边框看到的那样）。如果现在单击按钮，黑色矩形也不会离开画布，因为画布现在是整个视口。

我的目标是在不破坏 SVG 的情况下获得水平和垂直居中对齐。我在 flexbox 和 grid 方面很糟糕，但我想这可能是正确的道路？

感谢您对此的任何帮助！

编辑（添加 SO 代码片段）

打开代码 sn-p "Full Page" 并确保您打开了您的开发工具或重新调整您的浏览器。您会看到 SVG 不是垂直居中的。要玩，请使用 jsfiddle 版本。

svg {
      background-color:teal;
      border: 3px solid red;

      /* This will destroy the SVG canvas, enable to see effect: */
      /* position:fixed;
      height:100%;
      width:100% */
    }

<svg id="my-svg" viewBox="0 0 1920 1080">
</svg>

【问题讨论】：

标签： svg flexbox css-grid

【解决方案1】：

一种方法是使用 flex-box。

首先，您需要将容器元素（在本例中为 <body>）设置为窗口的整个高度。然后使用display: flex 和align-items: center 将SVG 垂直居中。

body {
  height: 100vh;
  display: flex;
  align-items: center;
}

https://jsfiddle.net/tyLub19n/

更新

要使其垂直响应，请为 SVG 指定 max-height，并将 justify-content: center 添加到 body CSS。

svg {
  background-color:teal;
  border: 3px solid red;
  max-height: 100vh;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

https://jsfiddle.net/3jyzoxb7/

【讨论】：

我有一个类似的解决方案，但这缺乏垂直响应能力（即，当视口非常宽时，svg 不会缩小）查看您的解决方案的 gif：s4.gifyu.com/images/unresponsive-vertical.gif
为了完整起见；这就是我想要的：s4.gifyu.com/images/desire-broken.gif 但是你可以看到它破坏了我的 SVG 的纵横比（这也可以通过填充背景色和红框来证明......
好的，非常感谢！这样就行了！我真的需要花一些时间在 flexbox 上……
我刚刚注意到这在 Safari 中不起作用。没有警告。它只是在屏幕中间画了一个小边框……你知道是什么原因造成的吗？
我现在手头没有 Mac 可以检查，抱歉。它在 iOS 和 MacOS 上都失败了吗？