title: SVG Won't Vertically Center
body: <p>I've been desperately trying to find some way to center my logo svg within a <code>&lt;div&gt;</code> tag. I've scoured what felt like all of stack overflow, but to no avail. I hope someone... anyone can help me out with this!
  Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.site-nav__list {
          display: flex;
          list-style: none;
          align-items: center;
          padding: 0;
          margin: 0;
      }
      .nav-logo {
          cursor: pointer;
          text-align: center;
          width: 3.7em;
          height: 3.7em;
          border: 1px solid red;
      }
      .nav-logo svg {
          display: block;
          width: 100%;
          height: 100%;
          border: 1px solid green;
      }
      .nav-logo svg g {
          border: 1px solid blue;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="site-nav__list"&gt;
            &lt;li&gt;
              &lt;div class="nav-logo"&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"&gt;
                  &lt;g data-name="Layer 1"&gt;
                    &lt;path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" /&gt;
                    &lt;path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" /&gt;
                  &lt;/g&gt;
                &lt;/svg&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Every solution I've found has not worked :/
  And no, table cells and absolute positioning are stupid on a simple svg.</p>