How to align the image to the center of the page in ionic

Question

I want to align the image (logo) with the center (both horizontally and vertically) of the page?

<ion-view hide-nav-bar="true"> <ion-content class="backgound-red "> <section class = "home-container"> <div class="row icon-row"> <div class="col"> <h1 class="text-white text-center">My Application </h1> <h4 class ="text-white text-center ">version 1.0.0</h4> </div> </div> <div class="row row-center" > <div class="col text-center" > <img alt="Logo" height="100" src="img/logo.png" > </div> </div> <div class="row icon-row"> <div class="col "> <a class="text-white text-center" href="#" onclick="window.open('http://members.000webhost.com/login.php?'); return false;"> <h5 class ="text-white text-center ">access server</h5></a> </div> </div> </section> </ion-content> 

the layout I want, the image should automatically center the center on the mobile phone screen. (tab, phone)

Answer 1

Try adding this CSS code, it will center img both horizontally and vertically.

 .home-container .row-center img { position:absolute; left: 0; right: 0; margin:0 auto; top:50%; transform:translateY(-50%); }