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

Omkar · Answer 1 · 2018-07-27T07:55:46.047

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

ionic uses scss...so the closing brace is fine – Suraj Rao Jul 27 '18 at 08:27 — Suraj Rao, Jul 27 '18 at 08:27

score 2 · Answer 2 · answered Jul 27 '18 at 08:41

2

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

answered Jul 27 '18 at 08:41

DJ MixRhymez

40
1
9

score 0 · Answer 3 · answered Jul 27 '18 at 07:39

0

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

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

answered Jul 27 '18 at 07:39

Sonia

1,909
1
11
13

Strangely enough, on iOS simulator the ionic card is some shifted to the right (more margin on left side on ion-card than the right margin). – Future2020 Jul 27 '18 at 09:34

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

3 Answers3