html - 使用 css 垂直居中内容，如何删除空白区域？

Question

您可以在下图中看到我的结果。红色框垂直居中，这是我的意图。但是红色框有很多空的空间。我不知道它是从哪里来的。我怎样才能删除它以使“真实”内容居中？

这是我的HTML

<ion-view view-title="{{ 'WELCOME' | translate }}">
  <ion-content class="padding cust-vertical-center">
    <form class="list">
      <label class="item item-input">
        <input type="text" class="text-align-center" placeholder="{{ 'EMAIL' | translate }}" ng-model="credentials.email"  autocapitalize="off" autocorrect="off" spellcheck="false">
      </label>
      <label class="item item-input">
        <input type="password" class="text-align-center" placeholder="{{ 'PASSWORD' | translate }}" ng-model="credentials.password"  autocapitalize="off" autocorrect="off">
      </label>
      <button class="button button-block button-stable" type="submit" ng-click="okLogin()">{{ 'LOGIN' | translate }}</button>
    </form>
  </ion-content>
</ion-view>

这是我的CSS

.cust-vertical-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: auto;

  background: red;
}

Answer 1

您的代码是正确的，并且没有您发布的图片中的“空白区域”。所以问题出在代码的其他地方。可能是 parent 的一些 css 属性。

你可以查看这个 FIDDLE中的代码 安装了 ionic。

你的 css(因为我需要输入一些代码):

.cust-vertical-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  background: red;
}