title: Center two SVGs in DIV
body: <p>I'm trying to vertically and horizontally center two separate SVGs inside a DIV. I also want them to be responsive and scale with the DIV rectangle when the page is resized.</p>
  
  <p>I'm trying to build this:</p>
  
  <p><a href="https://i.stack.imgur.com/fvXnt.png" rel="nofollow noreferrer">Mockup of site I'm trying to build</a></p>
  
  <p>I'm currently trying to use Flexbox and I've got the images centered, but they're on separate lines currently. </p>
  
  <pre><code>.container {
      background-color: #0000ff;
      display:flex;
      align-items:center;
      width:70%;
      height:4em;
      margin: auto;}
  
  .containernest {
      margin-left: auto;
      margin-right: auto;
      width: 70%;
      height: 6em;}
  </code></pre>
  
  <p>There also seems to be some browser issue going on, as you can see from the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/mpCh0.png" rel="nofollow noreferrer">Example of my browser issue (Chrome vs Safari)</a></p>
  
  <p>Any help would be greatly appreciated! </p>