title: IOS Safari on Ipad vertical center in absolute positioned container
body: <p>I have two containers which are positioned absolutely one below the other like so:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="vcenter"&gt;
      ...
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div id="wrapper"&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
  position: absolute;
  top: 0;
  height: 70%;
  }
  
  .vcenter {
  position: relative;
  margin-top: -50px;
  top: 50%;
  }
  
  #wrapper {
  position: absolute;
  width: 100%;
  top: 70%;
  }
  </code></pre>
  
  <p>I'm centering <strong>.vcenter</strong> vertically with relative positioning. This works fine in all major browsers. Only on IOS Safari on the Ipad it's bugging. Check out the <a href="http://www.maederproperty.ch/dienstleistungen.html" rel="nofollow noreferrer">site</a> I'm working on. <strong>.vcenter</strong> is the container of the logo.</p>
  
  <p>I'm inspecting it through Xcodes IOS-Simulator and also checked on an real Ipad. Is this possibly an IOS Safari Bug? Does somebody have a workaround? I want to keep my header dynamically resizing vertically (height: 70%)...</p>
  
  <p>Thanks in advance for your thoughts.</p>
  
  <p>Desktop Screenshot (how it should be):
  <img src="https://i.stack.imgur.com/pPSoY.png" alt="enter image description here"></p>
  
  <p>IOS-Simulator Ipad Screenshot (how it should't be):
  <img src="https://i.stack.imgur.com/5L5j3.png" alt="enter image description here"></p>