2

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:

enter image description here

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.

Teja Nandamuri
  • 11,045
  • 6
  • 57
  • 109
  • 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 Oct 17 '16 at 00:51
  • Margin :auto made div horizontally center , hence I'm looking at vertically centre – Teja Nandamuri Oct 17 '16 at 00:52
  • Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – Dekel Oct 17 '16 at 00:53

1 Answers1

1

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

css:-

#cool-button-div {

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

}
Arshid KV
  • 9,631
  • 3
  • 35
  • 36