画像をイオンのページ中央に揃える方法

Question

イメージ（ロゴ）をページの中心（水平と垂直の両方）に揃えたいですか？

<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> 

私が欲しいのレイアウト、画像は、携帯電話の画面に自動的に整列センターでなければなりません。（タブ、電話）

Answer 1

このCSSコードを追加してみてください、それimgを水平方向と垂直方向の両方にセンタリングします。

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