Correct method to center elements in ionic2

Question

I have placed some text and a button on page. I am currenlty centering it using traditional css methods that i know of. Is this the correct way to center in IONIC 2?

<ion-content padding class="login-signup">

  <ion-card>

  <div class="or-label">
   SOME-TEXT
  </div>

  <div class="signup-button">
    <button outline>Signup</button>
  </div>

</ion-content>

// corresponding css

 .or-label {
    width: 20%;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 2em;
    height: 50px;
    text-align: center;
    color: red;
  }


.signup-button {
  text-align:center;
}

Answer 1

Ionic 2 has some useful Utility Attributes that can be added to elements.

In this case adding text-center to an element will apply the text-align: center property to it, causing its inner content to be centered.

An example using your code would be something like...

<ion-card text-center>
    <div class="or-label">
        SOME-TEXT
    </div>
    <button outline>Signup</button>
</ion-card>