CODEWITHSUNDEEP
htmlcssionic-framework
user1283776
user1283776

Reputation: 21764

Am centering content vertically using css, how to remove empty space?

You can see my result in the image below. The red box is vertically centered, which I intended. But the red box has a lot of empty space. I don't know where it comes from. How can I remove it so that the "real" content is centered?

enter image description here

This is my 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>

This is my CSS

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

  width: 100%;
  height: auto;

  background: red;
}

Upvotes: 0

Views: 145

Answers (2)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

Your code is right and there's not "empty space" as in the picture you posted. So the problem is somewhere else in the code. Probably some css property of the parents.

You can check it out the code in this FIDDLE with ionic installed.

Your css (as I need to input some code):

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

Upvotes: 1

Gvidas
Gvidas

Reputation: 1964

You centering whole .cust-vertical-center element (which has red background) and is not 100% height inside html document, not its content, so other part of document is white. If you want all document background to be red you should add background style to body or html.

Here's jsFiddle with easiest solution.

Upvotes: 0

Related Questions