title: Vertical centering in Safari
body: <p>I've got a problem with vertical centering in Safari, using margin: auto 0; on a div which is nested inside a div with display: inline-flex;</p>
  
  <p>It works just fine in Firefox, Chrome, Opera... but fails in Safari (and on the default Android browser but I'm considering using a separate CSS for that and whatever iPads use)</p>
  
  <p>Here's the code (I am using Bootstrap, btw):
  <a href="http://jsfiddle.net/n2V5q/1/">http://jsfiddle.net/n2V5q/1/</a></p>
  
  <pre><code>&lt;div class="container-fluid head" id="slide1"&gt;
      &lt;div class="col-md-6 logo"&gt;
          &lt;img src="img/logo.png" alt="THE LOGO" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code> .container-fluid {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .head {
      color: #fff;
      width: 100%;
      min-height: 100rem; /* for Opera */
      min-height: 100vh;
      padding: 15px;
      background-color: rgba(85,61,148,.9);
      box-shadow: 0px 0px 6px #000000;
      z-index: 90;
      position: relative;
      background-image: url('../img/dither2.png');
      background-position: center bottom;
      background-repeat: repeat-x;
      display: -o-flex;
      display: -ms-flex;
      display: -moz-flex;
      display: -webkit-flex;
      display: inline-flex;
  }
  
  .col-md-6 {
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .logo {
      margin: auto 0;
      text-align: center;
  }
  </code></pre>