Teja Nandamuri Teja Nandamuri - 1 month ago 16
CSS Question

How to position ionic button using CSS

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.

Answer

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

css:-

#cool-button-div {

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

}