Ion-img in center of screen

Ionic Framework
1

I want to put ion-img in center of screen.
Currently doing this
In html

<ion-content   adding>
    <div class="center">
        <ion-img src="imgename" class="ion-align-self-end"></ion-img>
      </div>    
</ion-content>

in Scss

.center {
   display: block;
   margin: auto;
   width: 50%;
  }

Current Behaviour: Image is in center but it is top of screen

Expected Behaviour: It should be in center of screen.
Tried to use
https://beta.ionicframework.com/docs/layout/css-utilities#flex-properties but not luck.

Testing on iPhone X simulator.

Thanks

2

Try this code :

<div class="vertical-center">
  <div class="center">
    <ion-img src="imgename" class="ion-align-self-end"></ion-img>
  </div>   
</div>

Add this css

.vertical-center{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
2 Likes