title: Vertical centering flexbox overlay in iOS safari
body: <p>I have the following code for my flexbox overlay</p>
  
  <pre><code>.overlay-content-wrapper {
    display: -webkit-flex;
    display: flex;
    position:fixed;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 999;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 8px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .overlay-content {
      padding: 8px;
      min-height: 10px;
      min-width: 10px;
      margin: auto;
      background-color: #fff;
      border-radius: 8px;
      border: 1px solid #a5a5a5;
      position: relative;
  }
  
  &lt;div class="overlay-content-wrapper"&gt;&lt;div class="overlay-content"&gt;Some content&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In Chrome it works perfectly but in iOS safari (v6 simulator) it doesn't center vertically. What do I need to change to get it to work?</p>