title: How to align an ion-card in middle of the screen (vertically and horizontally) for iOS and Android?
body: <p>How to align an ion-card in middle of the screen (vertically and horizontally)? </p>
  
  <p>Debugging on iOS simulator displays the card but with more margin on the left side than the right. So not really centred. To center correctly i had to 
       <code>left: 47.5%</code>; instead of <code>left: 50%</code></p>
  
  <ul>
  <li><p>simple ion-card</p>
  
  <pre><code>&lt;ion-card class="error"&gt;
      &lt;ion-card-header class="error-header"&gt;
        &lt;ion-icon name="error"&gt;&lt;/ion-icon&gt;
        Error
      &lt;/ion-card-header&gt;
      &lt;ion-card-content class="error-body"&gt;
        Error occurred!    
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
  </code></pre></li>
  <li><p>styling in the sass file</p>
  
  <pre><code>.error {
  
      transform: translateX(-50%) translateY(-50%);
      top: 50%;
      left: 50%;
      position: absolute;
  
      .error-header {
          position: relative;
          text-align: center;
          top: 36%;
          font-size: 3.0em;
          width: 100%;
          font-weight: bold;
          color: red;
      }
  
      .error-body {
          font-size: 1.0em;
          text-align: center;
          position: relative;
          top: 52%;
          width: 100%;
      }
  }  
  </code></pre></li>
  </ul>