需要通过 CSS 在网页中居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2502206/
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
Need to center image in web page via CSS
提问by Robot
I'd like to center an image in a page both vertically and horizontally even when the browser is resized.
即使调整了浏览器的大小，我也想将图像垂直和水平居中放置在页面中。
Currently, I use this CSS:
目前，我使用这个 CSS：
.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
And this HTML:
而这个 HTML：
<img class="centeredImage" src="images/logo.png">
It centers in FF but not IE (image center is placed at upper left corner). Any ideas?
它以 FF 而不是 IE 为中心（图像中心位于左上角）。有任何想法吗？
-Robot
-机器人
采纳答案by medium
Try using this :
尝试使用这个：
position: absolute
回答by Babul Mirdha
I solved it this way:
我是这样解决的：
img.class-name{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
回答by JuanZe
This is a tricky way, but it works:
这是一种棘手的方法，但它有效：
CSS:
CSS：
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
HTML:
HTML：
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" alt="hello world" /></td>
</tr>
</table>
</body>
</html>
回答by berhauz
the universal KISS ("keep it simple and stupid") way:
通用的 KISS（“保持简单和愚蠢”）方式：
<p style="text-align: center;">?<img src="myImage.png" /></p>
回答by Michael B.
回答by Kevin
If the supplied answers do not work and/or not consistent in each browser you may want to give this a shot:
如果提供的答案在每个浏览器中都不起作用和/或不一致，您可能想试一试：
http://andreaslagerkvist.com/jquery/center/
http://andreaslagerkvist.com/jquery/center/
text-align:center;
Should get it, though.
不过应该可以拿到。
回答by Tesserex
IE has issues with position: fixed(along with a million other things), so I would advise against that if compatibility is important.
IE 有问题position: fixed（以及其他一百万件事情），所以如果兼容性很重要，我会建议不要这样做。
Use position: absoluteif the container doesn't have to scroll. Otherwise you'll need some js to adjust the top and left of your image as you do scroll.
使用position: absolute如果容器不必滚动。否则，您将需要一些 js 来在滚动时调整图像的顶部和左侧。
text-align: centershould work if applied to the image's container, but not to the image itself. But of course that only addresses the horizontal, not vertical. vertical-align: middledoesn't work for me, even with a large enough container.
text-align: center如果应用于图像的容器，而不是图像本身，则应该可以工作。但当然，这只能解决水平问题，而不是垂直问题。vertical-align: middle对我不起作用，即使有足够大的容器。
Auto margins don't work in IE, at least when I test it.
自动边距在 IE 中不起作用，至少在我测试时是这样。
回答by TheDudeAbides
clear: both; margin: auto;
清楚：两者；保证金：自动；
回答by Rahul dagli
Solution:
解决方案：
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: image-height/2;
margin-left: image-width/2;
}
since you mentioned:
既然你提到：
margin-top: -50px;
margin-left: -150px;
And if its aligning properly to the center then your image height would be 50x2=100px; & width 150x2=300px;
如果它与中心正确对齐，那么您的图像高度将为 50x2=100px；& 宽度 150x2=300px;
回答by user3668989
.image {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
