Ионный текст центра вертикально и горизонтально на экране

Я пытаюсь вертикально выровнять текст на своем экране. Я прочитал документы о том, как это сделать. Но мне все равно не повезло. Это мой код:

<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>

Ответы

Ответ 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>

Ответ 2

Попробуйте это решение:

1. Добавьте новые стили 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 class to ion-view:

<ion-view class="home">

демо

Ответ 3

Это работает на 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>

SASS:

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

Ответ 4

Как насчет указать "высоту"? В любом случае, централизуйте текст в горизонтальном положении, вы также можете использовать align="center". (Чтобы было понятно, я добавил цвет к строке и столбцу.)

<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>