离子中心文本在屏幕上垂直和水平

Question

我正试着在屏幕上垂直对齐我的文字.我已经阅读了有关如何执行此操作的文档.但我还没有运气.这是我的代码:

<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

这适用于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>

上海社会科学院:

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

Answer 3

尝试此解决方案:

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.适用home于ion-view:

<ion-view class="home">

演示