Html 如何在离子中将图像与页面中心对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33318634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 18:24:09 来源:igfitidea点击:
how to align a image to the center of a page in ionic
提问by Sajith
I want to align a image (logo)to the center (both horizontal and vertical)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 that I want, The Image should be align center automatically to the mobile screen.(tab, phone)
我想要的布局，图像应该自动居中对齐到手机屏幕。（标签，手机）
回答by Aziz
Try adding this CSS code, it will center the img both horizontally and vertically.
尝试添加此 CSS 代码，它将水平和垂直居中 img。
.home-container .row-center img {
position:absolute;
left: 0;
right: 0;
margin:0 auto;
top:50%;
transform:translateY(-50%);
}
