Center a vertically ionic ion-content v4

Ionic Framework
1

Hello everyone, someone knows how I can put it in the middle of the screen and see it in the middle of the screen in all the mobile devices the margin-top is to be downloaded using px or% but in screens it looks different

my html:

<ion-content color="favorite" padding>
  <div class="div_general">
    <img src="assets/imgs/logo.png" width="55%">
    <div class="div_mayor">
      <ion-list no-lines>
        <ion-item>
          <ion-label><ion-icon name="person"></ion-icon></ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label><ion-icon name="key"></ion-icon></ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
        <ion-button color="favorite" class="button" expand="block">
          INGRESAR
        </ion-button>
      </ion-list>
    </div>
  </div>
</ion-content>

my css:

ion-content {
    width: 100% auto !important;
}
img{
    display:block;
    margin:auto;
    }

.div_mayor{
    margin-bottom: 20px;
    width:auto;
    margin:auto;
    height: 200px auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    ion-button {
        height: 45px;
        margin-top: 10px !important;
    }
    ion-item{
        padding: 3px;
        margin-top: 10px !important;        
        border-radius: 10px;
        border-style: solid;
        border-color: #3f51b5;        
    }  
}

41%20AM
WhatsApp Image 2019-01-19 at 10.55.41 AM.jpeg720×1280 31.4 KB

2

See “Flex Container Properties” in the documentation https://beta.ionicframework.com/docs/layout/css-utilities

3

@reedrichards, can you elaborate ? I think I tried all of the examples in the CSS Utilities and none answers the question of @MoreFlores.

How to vertically center the content of a ion-content ?

4

I’m not very good at CSS, but I have a small bag of tricks I’ve collected over the years, and here are two things from it:

.fullheight {
  height: 100%;
}

.xc {
  display: flex;
  align-items: center;
  justify-content: center;
}

Try this:

<ion-content>
  <div class="fullheight xc">
    <div>hello world</div>
  </div>
</ion-content>

.fullheight is needed to prevent the host <div> from collapsing vertically, and .xc centers a single child both horizontally and vertically. It’s named that because it puts the child at the center of an ‘x’. Is that sort of what you seek?

12 Likes
5

checkout above @rapropos solution

6

OK, that is what I resorted to. However, I thought Ionic’s CSS Utilities could handle this case.

Thanks @rapropos.