title: Ionic bar-header not centered when running on iOS device
body: <p>I am building an app for Android and iOS using Ionic.<br>
  I use <code>bar-header</code> for titles in my views:</p>
  
  <pre><code>&lt;ion-view view-title="Home" class="tab-home"&gt;
      &lt;ion-content class="padding"&gt;
          &lt;div class="bar bar-header bar-positive"&gt;
              &lt;div class="h1 title"&gt;The European Experience&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="bar bar-subheader bar-stable"&gt;
              &lt;h2 class="title"&gt;Companion App&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="content has-header padding"&gt;
              ...
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>When displayed in my browser with <code>ionic serve -l</code>, the header is correctly displayed:</p>
  
  <p><a href="https://i.stack.imgur.com/p7oKi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p7oKi.png" alt="ionic lab display"></a></p>
  
  <p>When running on a real Android device, it works as well:
  <a href="https://i.stack.imgur.com/nyv8T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nyv8T.png" alt="run on Android"></a>
  But when I run the app on an iOS device (either physical or on Simulator), the title is not vertically centered:</p>
  
  <p><a href="https://i.stack.imgur.com/S7wHr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S7wHr.jpg" alt="run on iPhone"></a>
  I tried adding CSS to explicitly specify <code>vertical-align</code> or <code>text-align</code>, but without success.</p>
  
  <h2>What could explain this issue? And how can I center the title inside this header?</h2>