我如何将我的 svg 在视口中间的 css 中居中？答案

【问题标题】：How can i center my svg in css in the middle of viewport?我如何将我的 svg 在视口中间的 css 中居中？
【发布时间】：2020-08-06 20:27:00
【问题描述】：

无论我做什么，我的 svg 似乎都卡在屏幕的右下方！我想将它的高度和宽度居中在视口的中间，请在下面找到带有图像的 HTML 和 CSS 代码

body {
  display: flex;
  margin-right: 0;
  background-color: #000;
  align-self: center;
  justify-content: center;
}

.letters {
  align-items: center;
  align-self: center;
  align-content: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.0/lib/anime.min.js"></script>
</head>

<body>
  <div class="logo-container">
    <svg id="logo" width="1200" height="760">
      <path class="letters" stroke="red" stroke-width="3" fill="none" d="M406.168,537.652V662.334h36.12c34.306,0,62.87-25.994,62.87-62.416,0-36.271-28.715-62.266-62.87-62.266h-36.12Zm28.412,99.292v-73.9h4.383c21.158,0,35.515,16.171,35.515,37.027-0.151,20.856-14.508,36.875-35.515,36.875H434.58Zm154.451-99.292H517.7V662.334h71.333V637.4H546.11V612.31h41.108V587.374H546.11V562.589h42.921V537.652Zm62.262-2.267c-20.1,0-40.654,14.811-40.654,38.085,0,13,8.765,24.634,23.727,32.039,14.811,7.406,28.11,11.486,28.11,20.554,0,11.637-11.788,12.241-17.984,12.241-13.9,0-30.528-14.055-30.528-14.055l-14.206,23.879S617.44,664.6,646.608,664.6c24.332,0,47-10.428,47-40.2,0-16.322-15.264-28.111-29.168-34-14.206-6.045-25.994-11.032-25.994-17.984,0-6.8,5.138-11.183,14.81-11.183,12.846,0,25.239,8.614,25.239,8.614l11.486-22.67A70.89,70.89,0,0,0,651.293,535.385Zm84.025,2.267H706.906V662.334h28.412V537.652ZM866.2,592.512h-57.58v21.914H837.33c0,15.264-13.451,24.03-27.052,24.03-17.531,0-31.738-17.229-31.738-38.387,0-21.612,14.207-38.992,31.738-38.992,11.032,0,20.553,4.383,27.807,16.02l18.589-20.4c-10.881-13.149-26.145-21.31-48.059-21.31-35.062,0-60.754,28.866-60.754,64.684,0,35.666,27.2,64.532,60.754,64.532,24.483,0,50.78-13.451,57.58-45.037V592.512Zm40.953-7.556h0.3l49.57,77.378h28.412V537.652H957.021v77.379h-0.3l-49.571-77.379H878.736V662.334h28.412V584.956Zm167.752-47.3h-71.33V662.334h71.33V637.4h-42.92V612.31h41.1V587.374h-41.1V562.589h42.92V537.652Zm16.32,0V662.334h28.41V613.066l38.08,49.268h36.12L1150.91,610.8c15.27-4.836,25.54-17.38,25.54-36.12,0-24.483-17.53-37.027-40.65-37.027h-44.58Zm28.41,55.314V560.322h3.32c10.73,0,23.58.755,23.58,16.322s-12.85,16.322-23.58,16.322h-3.32Z"></path>
    </svg>
  </div>
  <script type="text/javascript">
    anime({
      targets: "#logo path",
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutQuad',
      duration: 5000,
      direction: 'alternate',
      loop: true
    });
  </script>
</body>

</html>

【问题讨论】：

标签： html css svg

【解决方案1】：

基本上，您需要纠正很多事情。

SVG 包装器有不必要的空白。这占用了屏幕上的空间。
对 css 的细微调整。

请在下面找到代码。

body {
  display: flex;
  margin-right: 0;
  background-color: #000;
  align-self: center;
  justify-content: center;
}

.logo-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}
.logo-container svg {
  width: 100%;
  max-width: 700px;
}
.letters {
  align-items: center;
  align-self: center;
  align-content: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.0/lib/anime.min.js"></script>
  </head>
  <body>
    <div class="logo-container">
      
      <svg
        version="1.1"
        id="logo"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 792.4 132.2"
        style="enable-background: new 0 0 792.4 132.2;"
        xml:space="preserve"
      >
        <style type="text/css">
          .st0 {
            fill: none;
            stroke: #ff0000;
            stroke-width: 3;
          }
        </style>
        <path
          class="st0"
          d="M1.5,3.8v124.7h36.1c34.3,0,62.9-26,62.9-62.4c0-36.3-28.7-62.3-62.9-62.3H1.5z M29.9,103.1V29.2h4.4
    c21.2,0,35.5,16.2,35.5,37c-0.2,20.9-14.5,36.9-35.5,36.9L29.9,103.1L29.9,103.1z M184.4,3.8H113v124.7h71.3v-24.9h-42.9V78.4h41.1
    V53.5h-41.1V28.7h42.9V3.8z M246.6,1.5c-20.1,0-40.7,14.8-40.7,38.1c0,13,8.8,24.6,23.7,32c14.8,7.4,28.1,11.5,28.1,20.6
    c0,11.6-11.8,12.2-18,12.2c-13.9,0-30.5-14.1-30.5-14.1l-14.2,23.9c0,0,17.7,16.5,46.8,16.5c24.3,0,47-10.4,47-40.2
    c0-16.3-15.3-28.1-29.2-34c-14.2-6-26-11-26-18c0-6.8,5.1-11.2,14.8-11.2c12.8,0,25.2,8.6,25.2,8.6l11.5-22.7
    C273.8,5.7,260.4,1.6,246.6,1.5L246.6,1.5z M330.7,3.8h-28.4v124.7h28.4L330.7,3.8L330.7,3.8z M461.5,58.6H404v21.9h28.7
    c0,15.3-13.5,24-27.1,24c-17.5,0-31.7-17.2-31.7-38.4c0-21.6,14.2-39,31.7-39c11,0,20.6,4.4,27.8,16L452,22.8
    C441.1,9.7,425.9,1.5,403.9,1.5c-35.1,0-60.8,28.9-60.8,64.7c0,35.7,27.2,64.5,60.8,64.5c24.5,0,50.8-13.5,57.6-45L461.5,58.6
    L461.5,58.6z M502.5,51.1h0.3l49.6,77.4h28.4V3.8h-28.4v77.4h-0.3L502.5,3.8h-28.4v124.7h28.4L502.5,51.1L502.5,51.1z M670.2,3.8
    h-71.3v124.7h71.3v-24.9h-42.9V78.4h41.1V53.5h-41.1V28.7h42.9V3.8L670.2,3.8z M686.6,3.8v124.7H715V79.2l38.1,49.3h36.1l-42.9-51.5
    c15.3-4.8,25.5-17.4,25.5-36.1c0-24.5-17.5-37-40.7-37L686.6,3.8L686.6,3.8z M715,59.1V26.4h3.3c10.7,0,23.6,0.8,23.6,16.3
    S729,59.1,718.3,59.1L715,59.1L715,59.1z"
        />
      </svg>

 
    </div>
    <script type="text/javascript">
      anime({
        targets: "#logo path",
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: "easeInOutQuad",
        duration: 5000,
        direction: "alternate",
        loop: true,
      });
    </script>
  </body>
</html>

【讨论】：

谢谢桑尼，这行得通。我认为主要问题也是一开始的超大 svg。

【解决方案2】：

为了使子元素与 flexbox 居中，父元素应包含以下样式：

align-items: center;
justify-content: center;

输入您的body 样式，它缺少align-items。

【讨论】：

我已经证明了内容：居中并尝试对齐项目但没有用