How to position ionic button using CSS

Question

I'm trying to position a button to center of screen. But it looks like there's an offset of 20px to the button.It appears 20px vertically away from the exact center.

Here's how it looks:

Here's the html body:

<body ng-app="starter" class="platform-ios platform-cordova platform-webview">
    <ion-pane>
      <ion-content>
          <div  id="cool-button-div">
          <button class="button button-block button-calm">Cool!</button>
          </div>
      </ion-content>
    </ion-pane>
  </body>

and CSS:

  #cool-button-div {

    position: relative;
    width:200px;
    margin:auto;
    margin-top:50%;

}

I can position the button by calculating the exact center of screen and if I use top : 250px, it works but if I use top:50% it doesnt work.

Note: I do not want to use additional divs which act like spacer views.

I guess you are trying to position it to the middle (top-bottom) of the screen, and not center (left-right) of the screen. Right? — Dekel
– Dekel, Commented Oct 17, 2016 at 0:51
Margin :auto made div horizontally center , hence I'm looking at vertically centre — Teja Nandamuri
– Teja Nandamuri, Commented Oct 17, 2016 at 0:52
Possible duplicate of How to vertically center a div for all browsers? — Dekel
– Dekel, Commented Oct 17, 2016 at 0:53

Arshid KV · Accepted Answer · 2016-10-17 01:03:19Z

1

I think vh unit will help you. Please use vh.

css:-

#cool-button-div {

    position: relative;
    width:200px;
    margin:auto;
    margin-top:50vh;

}

answered Oct 17, 2016 at 1:03

Arshid KV

10k3 gold badges37 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Teja Nandamuri Over a year ago

Cool. I always want to avoid placing additional divs. Though it worked, can you add some additional reference on vh ?

Arshid KV Over a year ago

Please check developer.mozilla.org/en-US/docs/Web/CSS/length#vh

Teja Nandamuri Over a year ago

Thanks for quick response!

Collectives™ on Stack Overflow

How to position ionic button using CSS

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related