Place element in the center of the page (horizontal and vertical center)


#1

Hello, I need to place a spinner in the middle of the page with a text under it.

I’ve searched alot but none of the examples to place stuff in the center of a page works. It’d be just an empty page

This is the best I’ve got but the text isn’t getting under the spinner and moving it:

<ion-content>
    <ion-grid style="height: 100%">
        <ion-row justify-content-center align-items-center style="height: 100%">
                <ion-spinner name="ios"></ion-spinner><br><br><br>
                Cargando centros...
        </ion-row>
      </ion-grid>
</ion-content>

This is my result with the above example:

Could someone give me a hand?

Thanks!!


#2

so did you try doing it using CSS?


#3

I tried that already but it didnt work :frowning: idk if I’m doing it wrong or something, I’m new to Ionic and never developed a web either


#4

@Kyrax80 You have to use style flex-direction: column

<ion-content padding>
  <ion-grid style="height: 100%">
      <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column">
          <ion-spinner name="ios"></ion-spinner>
          Cargando centros...
        </ion-row>
      </ion-grid>
</ion-content>

I have fixed your code , please check here :


#5

Thank you very much, that worked pretty well.

I have another question if you don’t mind.

I want to show that loading spinner in the center as it currently is with your code, in the center.

But once my data has finished loading I want to show a list of this data.

How can I do this? Is it possible to have 2 grids in a page and just show one or another with a <div *ngIf...>? Because I’m trying this but if I do:

<div *ngIf="!loading">
<ion-grid>
    <ion-row>
        <ion-col>
               My data
        </ion-col>
    </ion-row>
</ion-grid>
</div>

<div *ngIf="loading">
  <ion-grid style="height: 100%">
      <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column">
          <ion-spinner name="ios"></ion-spinner>
          Cargando centros...
      </ion-row>
   </ion-grid>
</div>

The spinner shows in the top of the page


#6

@Kyrax80 You can implement with the following code:

<ion-content padding>
  <ion-grid style="height: 100%">
    <ion-row *ngIf="loader" justify-content-center align-items-center style="height: 100%; flex-direction: column">
      <ion-spinner name="ios"></ion-spinner>
      Cargando centros...
    </ion-row>
    <ion-row *ngIf="!loader" style="height: 100%; flex-direction: column">
      <p>List item 1</p>
      <p>List item 2</p>
      <p>List item 3</p>
      <p>List item 4</p>
      <p>List item 5</p>
      <p>List item 6</p>
    </ion-row>
  </ion-grid>
</ion-content>
export class HomePage {
  loader = true;

  constructor(public navCtrl: NavController) {

  }

}

check StackBlitz . I updated the code.


#7

Perfect! You’re my savior, thank you very much :smiley:


#8

welcome :grinning::+1: