Vertically and horizontally center a panel - help needed!

ionic-v1
1

I can’t believe it’s 2015 and I’m having trouble centering stuff… I can do it with custom CSS but want to do it using the ionic grid system.

Basically I want a vertically and horizontally centered div that (will have) a max-width, such that on a tablet it sits centrally, but on a mobile it’s pretty much taking up the full width (with some padding).

I had this working with custom flexbox CSS but that was causing problems when a nested text field was focused.
Here’s a stripped down version of what I have now:

<ion-view view-title="Setup">
  <ion-content has-bouncing="false" overflow-scroll="false" padding="true" hide-back-button="true" class="row row-center center">
    <div class="col col-center center">
      Hello world
    </div>
  </ion-content>
</ion-view>

The row is vertically centered but Ionic renders a nested <div> with the classes scroll padding inside my element but outside the col-center div:

<!-- rendered html -->
<div class="scroll padding" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
  <div class="col col-center center">
    Hello world
  </div>
</div>

This scroll padding div is not centred horizontally and it matches the width of the content. So that nested col col-center div is constrained on the left inside it.

image
Screenshot-2015-06-16-14.04.54.png649×956 15 KB

How do I get my column to be centered hozontally within the vertically centered row?

2

…confusingly (to me) if I change that <ion-content> to a DIV:

<ion-view view-title="Setup">
  <div class="row row-center center">
    <div class="col col-center center">
      Hello world
    </div>
  </dov>
</ion-view>

…we get the opposite effect: horizontally centered but fixed to the top of the window.

Why / how do the CSS classes work differently on the <ion-content> directive to a plain <div> ?

3

OK… it seems I have to use custom CSS after all. This works:

<ion-view view-title="Setup">
  <ion-content class="center">
    <div class="row">
      <div class="col">
        Hello world
      </div>
    </div>
  </ion-content>
</ion-view>

BUT… it I have to apply custom CSS to the <ion-content> via its center class:

.center {
  -webkit-align-content: stretch;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -webkit-justify-content: center;
  align-content: stretch;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

What’s confusing is that the documents here purport that Ionic handles this out of the box (so to speak) without the need for custom CSS, but it doesn’t appear to work in practice.

4

I had the same problem, apparently the official grid formula is not working as expected.

Thanks for your solution, was really helpful.

5

This too doesn’t work for me. The scroll div takes 100% of the content height negating the flex align-center effect.