How to align an ion-card in middle of the screen (vertically and horizontally) for iOS and Android?

Question

How to align an ion-card in middle of the screen (vertically and horizontally)?

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 left: 47.5%; instead of left: 50%

• simple ion-card

  <ion-card class="error">
      <ion-card-header class="error-header">
        <ion-icon name="error"></ion-icon>
        Error
      </ion-card-header>
      <ion-card-content class="error-body">
        Error occurred!    
      </ion-card-content>
    </ion-card>
  

• styling in the sass file

  .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%;
      }
  }  
  

Answer 1

.error { width: 50%; height: auto; margin: auto; }

Answer 2

IMO check your css it should be

    .error {

 transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    position: absolute;
     } // close here

.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%;
}

// not here

also if don't know size of card then make position fixed like try

   .error {

 transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    position: fixed;
     }

if you set fixed position then try

 .error {

 transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
     }

OR

better you may go through this

Answer 3

You need to add the XY co-ordinates in one line

transform: translate(-50%, -50%);