Testo centrale ionico verticale e orizzontale sullo schermo

Question

Sto provando ad allineare verticalmente il mio testo sullo schermo. Ho letto attraverso the docs su come farlo. Ma non sto ancora avendo fortuna. Questo è il mio codice:

<div class="row"> 
    <div class="col col-center text-center"> 
    <h4 class="gray">This text is in the center of the screen</h4> 
    </div> 
</div> 

Answer 1

HTML

<div class="row"> 
    <div class="col"> 
     <div class="text-center"> 
      <h5 style="text-align: center;">This text is in the center of the screen</h5> 
     </div> 
    </div> 
</div> 

Answer 2

ne dite di specificare la "altezza"? Ad ogni modo, centralizza il tuo testo in orizzontale, puoi anche usare align="center". (Per chiarire, ho aggiunto il colore di remare e col.)

<div class="row" style="height: 900px; background-color: blue;"> 
    <div class="col col-center" style="background-color: red;> 
    <h4 class="gray" align="center">This text is in the center of the screen</h4> 
    </div> 
</div> 

Answer 3

provare questa soluzione:

1.Add stili nuovi CSS:

.home .scroll-content { 
    display: table !important; 
    width: 100% !important; 
    height: 100% !important; 
    margin-top: -50px; /* the height of the centered content */ 
    text-align: center; 
} 
.home .scroll { 
    display: table-cell; 
    vertical-align: middle; 
} 

2.Apply home classe per ion-view:

<ion-view class="home">

demo

Answer 4

questo funziona su ionico Framework 3.0.1:

HTML:

<ion-content padding> 
<div> 
    <h4 class="gray">This text is in the center of the screen</h4> 
</div> 
</ion-content> 

SASS:

ion-content { 
div { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
}