How to center the entire ion-content

ionic-v1
1

hello,

i am wondering if there is a way to center the content inside ion-view without specifying the height or width.

I have seen some examples over the web, but they break when using with ionic

<ion-view hide-nav-bar="true" has-header="false">
	<ion-content>
            some content
        </ion-content>
</ion-view>

any ideas?

2

Did try this: http://ionicframework.com/docs/components/#grid ?

3

i did… can you be more specific?

i could do:

<div class="row" style=" height: 500px;">
     <div class="col col-center">
          <div class="col-demo">.col</div>
     </div>
</div>

but i have to give it a height

4

the solution i came up with is to use some JS

<ion-content id="home-content">
    <div class="row" ng-style="pageHeight">
         <div class="col col-center">
              <div class="col-demo">.col</div>
         </div>
    </div>
</ion-content>

var homeHeight = document.getElementById('home-content').clientHeight;
$scope.pageHeight = {height: homeHeight + 'px'};

but would be nice to have a full css solution

5

Using columns and http://ionicframework.com/docs/components/#grid-vertically-align