Best way to center contents in a view


#1

I have a div I am trying to center on a view in ionic.

In my view I place a search box at the top and then on the remaining space i want to horizontally and vertically center a div.

<form ng-submit="vm.searchQuery() && searchForm.$valid" name="searchForm" novalidate>
        <div class="list search-box">
            <label class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="text" placeholder="Address">
            </label>
        </div>
        </form>
        <div class="home-shortcuts">
...
</div>

With .home-shortcuts being the the div I would like to vertically center.

.home-shortcuts{
    position: absolute;
    left: 0%;
    right: 0%;
    top: 25%;
    bottom: 25%;
}

This kinda worked but I find it jumps around when the keyboard opens / closes so wanted to use something without absolute positioning.

Any ideas ?


#2
  • To center text just add the class text-center to it’s parent container.

  • To center something else use the following css:

    .my-center-class {
    float: none;
    margin: auto;
    }


#3

or you use the scss mixins of ionic like:
align-self(center);

or create your own flexbox helper classes with ionic flexbox mixins your can found here:


#4

Its basically a div I am trying to center Vertically on the page not text and margin auto will just center horizontally.


#6

sry, didn’t saw that you don’t want a solution with absolute position


#7