title: centering inline-block elements when flexbox and classic techniques don't work
body: <p>In the page <a href="https://irfan.io" rel="nofollow">here: https://irfan.io</a></p>
  
  <p>I have tried centring the smaller circles every-way I can think of and they either don't get centred or the centring is not responsive-- meaning it fails when the viewport is changed.</p>
  
  <p>They are all of class .small and they are children of #main.</p>
  
  <p>I have tried flexbox:</p>
  
  <pre><code>#main{
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .small{
      display:flex;
  }
  </code></pre>
  
  <p>I have tried giving wrapping the .small elements in a container and giving that a fixed width and centring with -0.5 of the width:</p>
  
  <pre><code>#smallContainer{
      width:500px;
      margin-left:-250px;
      position:relative;
      left:50%;
  }
  </code></pre>
  
  <p>I also figured since they were inline-block elements I could use <code>text-align:center;</code> on the .small element, but that didn't work.</p>
  
  <pre><code>#small{
     text-align:center;
  }
  </code></pre>
  
  <p>I can't seem to figure out how to centre 3 small circles so that the middle one is in the vertical-middle like the bigger circle ( .big ), which I centred using the 2nd technique.</p>
  
  <p>Does anyone have any ideas on how to do this?</p>