How to center a div horizontally and vertically inside a ion-content

ionic-v1
1

Hey everyone,

I was wondering if there is a CSS solution to center a div horizontally and vertically inside a ion-content. I know that some people asked similar questions already but it didn’t help me. This is my problem:

<ion-content>
  <div class="row">
    <div class="col col-center">
      <i class="icon ion-ios-bell-outline"></i>
    </div>
  </div>
</ion-content>

or

<ion-content>
  <div class="">
    <i class="icon ion-ios-bell-outline"></i>
  </div>
</ion-content>

I need to know the height of the parent container (ion-content) in order that the above code works! @patrioticcow came up with this JS solution: How to center the entire ion-content

I also found this codepen in the forum: http://codepen.io/hannuraina/pen/qoalx

Both solutions doesn’t really center my row or a single div. Thank you in advance!

2

Hi @Schulte have you tried this CSS-only solution ?
https://css-tricks.com/centering-percentage-widthheight-elements/

1 Like