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


Tags: html,css,ionic

Problem :

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


Solution :

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

    CSS Howto..

    How to assign css for prettify(syntax highlighter)

    How to apply CSS to the first letter after :before content?

    how to ignore br or line breaks in text with pure css truncate text button

    How to NOT select only specific elements in a table with jQuery?

    How can I make my numbered scale responsive to scrolling and clicking?

    How to serve static files for local development in Django 1.4

    How to Get Multiple elements to change color on hover CSS?

    How can I make it so that my logo on the top left of the page lines up with the text underneath it?

    How to check image is visible (Webdriver)

    How do I modify the bootstrap carousel javascript file so that it can trigger this function?

    How to correctly override inaccessible HTML content with CSS?

    how can i change the style of scroll bar

    how to crop big image in bootstrap carousel

    How to CSS select all cells with colspan set?

    How to create vertically centered meeting borders on a div?

    How to change the active color of the tabs title background using css

    How to change CSS of child element inside parent
    element Using jQuery onclick event?

    How to use background css for an image not in the Content or Resource folder

    How to display image in sidebar-wrapper css class

    How to use css in one page only?

    CSS: How to limit horizontal/vertical scrolling?

    How to change the Menu colour when selected?

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    How to make a automatic image slider.?

    How to avoid css overlapping?

    Height isn't showing up full on everything except Chrome

    How to force a hover state with jQuery?

    How to install CSS templates with Flask?

    How is CSS linked to [closed]

    How to determine the display order of
  • in a list with 4 columns?