How to center a div on Screen?



i’m looking for a way to center an element (div, image…) right in middle of the screen (flex). I tried ionic grid. But I have to set the height of the row manually. Is there a ionic-, flex- or responive-way to set the height.

Here is my codepen, so far: CodePen - Ionic Center


Vertically center a button

Try following structure…

<ion-content padding="false" scroll="false"  has-bouncing="false">
            <div id="form">
                <div class="list">
                    <label class="item item-input" id="company">
                        <input type="text" placeholder="Company Name*" focus-me="{{cmpFocus}}" ng-model="user.companyname" maxlength="100">
                    <div class="padding submitbtn">
                        <button type="submit" class="button" ng-click="registration(user);">SUBMIT</button>


.scroll {
        height: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        text-align: center;
        background-color: #0080a8;
        border-radius: 5px;
        color: #90d8ef;
        border-color: #90d8ef;
        width: 40%;


@bentgler originally posted this. Might helpbu


@shashikant your solution uses position:fixed, this is not supported in all browsers. Android versions lower then 3 will not render this correctly.

Instead, we should use position:absolute with top, bottom, left and right set to zero and applying margins to an inner element to create the intended behaviour.


hi, i tried following the article by using:

display: flex;
align-items: center;
justify-content: center;

it works perfectly on chrome browser but not on android device, any advice on this? thx.


Hello, I use prefix with flex property

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;


hi, i just tried, still the same, not working on android