响应性SVG，在保持纵横比/原始大小的同时，垂直和水平居中_Svg_Flexbox_Css Grid

响应性SVG，在保持纵横比/原始大小的同时，垂直和水平居中

svg

响应性SVG，在保持纵横比/原始大小的同时，垂直和水平居中,svg,flexbox,css-grid,Svg,Flexbox,Css Grid,我尝试为我的SVG实现以下目标：响应性强（我使用viewBox，在svg元素上没有宽度/高度，效果非常好）垂直和水平居中（硬部分）对中SVG应保持其原始纵横比我制作了一个JSFIDLE演示来进行说明（作为内置的SO代码片段，更易于导航）：（请确保在“设置”下将编辑器布局设置为“右结果”，这样可以通过拖动平铺分隔线更轻松地更改画布大小）如您所见，画布位于最顶部，水平填充视口的整个宽度，从技术上讲，这使其水平居中。此外，如果单击按钮，黑色矩形将向下移动，离开画布一半，这是我想要的行为现

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

响应性强（我使用

viewBox

，在

svg

元素上没有宽度/高度，效果非常好）

垂直和水平居中（硬部分）

对中SVG应保持其原始纵横比

我制作了一个JSFIDLE演示来进行说明（作为内置的SO代码片段，更易于导航）：（请确保在“设置”下将编辑器布局设置为“右结果”，这样可以通过拖动平铺分隔线更轻松地更改画布大小）

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

现在，我试图通过添加以下CSS（在JSFIDLE上注释掉）来引入居中的垂直对齐：

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

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

谢谢你在这方面的帮助

编辑（添加SO代码段）打开代码段“完整页面”，确保打开开发工具或重新缩放浏览器。您将看到SVG不是垂直居中的。要玩游戏，请使用JSFIDLE版本

svg{
背景色：青色；
边框：3倍纯红；
/*这将破坏SVG画布，使其能够看到效果：*/
/*位置：固定；
身高：100%；
宽度：100%*/
}

一种方法是使用flex box

首先，需要将容器元素（在本例中为

）设置为窗口的完整高度。然后使用

display:flex

和

align items:center

将SVG垂直居中

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

更新

要使其垂直响应，请为SVG指定一个

max height

，并将

justify content:center

添加到

主体

CSS中

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

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