ionic framework - docs - Texto de centro iónico vertical y horizontalmente en la pantalla

ionic v2 documentation

Question

Intento alinear verticalmente mi texto en mi pantalla. He leído los documentos sobre cómo hacer esto. Pero todavía no estoy teniendo suerte. Este es mi código:

<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

¿Qué tal si especificas la "altura"? De todos modos, centralice su texto en horizontal, también puede usar align="center" . (Para que quede claro, agregué el color a la fila y 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 2

Prueba esta solución:

1.Agregar nuevos estilos 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. Aplicar home clase de home a ion-view :

<ion-view class="home">

manifestación

Answer 3

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 4

Esto funciona en Ionic 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>

HABLAR CON DESCARO A:

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