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 modify CSS or JS file from “materialize:materialize” package in Meteor

    How to develop two different menu bars for a website (one for all users, and the other one for the Admin) in ASP.NET webfroms?

    how to position a div below an absolute div in css

    How to make div move to bottom of page

    How can I make a circle using css and apply it to my header?

    How to select list item by its contents?

    How to access an element's class value via CSS

    how to make a timeline using html, css, javascript?

    How to display “a” to full of the line

    How to style my HTML form using CSS

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    how to stop this irritating css behaviour

    Test if is visible with ng-show attribute

    CSS3 Keyframes how to make a image circle run without moving

    How to create animated element that follows browser like on http://metalab.co/projects/swivl/? [closed]

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    How can I center just one element within a container?

    JQuery function to show element dependent on the value of hidden HTML input element

    how to create a rotateY animation via jQuery and css 3

    How to write CSS in Vaadin 6?

    How to do Hanging Punctuation in HTML / CSS

    Show image when hovering on a span

    In Python, I can print HTML to the browser, how can I ensure that the CSS that relates to it also get “printed”

    How do I vertically centre a div of variable height within a div of variable height?

    How to make CSS border show on radio button click

    HTML+CSS: How to force div contents to stay in one line?

    How to create hidden pop out side menu

    CSS - how to make the end of the word blurry?

    Interface problem the right css style is not being called. How to call the right one?

    how can i make the li inside the div be horizontal?