使图像在 html 中对齐屏幕中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20878342/
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
Making image align center of screen in html
提问by V-Xtreme
I am loading image on iOS device. I want my image to be centered horizontally as well vertically center with all screens and orientation . I have tried it using table and td , It is aligning horizontally center but not aligning vertically middle . This is what I have tried html:
我正在 iOS 设备上加载图像。我希望我的图像在所有屏幕和方向上水平居中以及垂直居中。我已经尝试过使用 table 和 td ，它是水平居中对齐，但不是垂直居中对齐。这是我尝试过的html：
<table width=100% height=100%>
<tr>
<td style="text-align: center; vertical-align: middle;">
<img src="" />
</td>
</tr>
</table>
css:
css：
html, body
{
height: 100%;
}
回答by Surjith S M
Instead of Table, You can achieve the same with divand img
代替 Table，您可以使用div和实现相同的效果img
HTML
HTML
<div><img src="http://placehold.it/350x150"></div>
CSS
CSS
html, body
{
height: 100%;
margin:0;
padding:0;
}
div {
position:relative;
height: 100%;
width:100%;
}
div img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
回答by Arash Hatami
There is a simple and easy way :
有一个简单易行的方法：
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
回答by Zword
Try background image with background-position:50% 50%
尝试使用背景图像 background-position:50% 50%
http://jsfiddle.net/Zword/Ve6yz/3/
http://jsfiddle.net/Zword/Ve6yz/3/
html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
回答by Shadow
回答by Shadow
css
css
html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
}
HTML
HTML
<table width=100% height=100% border="1">
<tr>
<td style="text-align: center; vertical-align: middle;">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
</td>
</tr>
</table>
If you are wondering what i have changed, then let me tell you even i am wondering the same:)
如果你想知道我改变了什么，那么让我告诉你，即使我也在想同样的事情:)
but i think, making body and html tag more general helps...
但我认为，使 body 和 html 标签更通用有助于...
