How to center a div on Screen?

ionic-v1
1

Hi,

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

regards
mav

3

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">
                    </label>    
                    <div class="padding submitbtn">
                        <button type="submit" class="button" ng-click="registration(user);">SUBMIT</button>
                    </div>
                </div>
            </div>
        </ion-content>

CSS…

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

    .padding{
        text-align: center;
    }
    .button{
        background-color: #0080a8;
        border-radius: 5px;
        color: #90d8ef;
        border-color: #90d8ef;
        width: 40%;
    }
4

http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

@bentgler originally posted this. Might helpbu

5

@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.

6

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.

7

Hello, I use prefix with flex property

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

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