Html 图像中心垂直和水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5481821/
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
Image center align vertically and horizontally
提问by Soarabh
Hi I want to place a Image which is center align vertically and horizontally as well, My HTML markup is
嗨，我想放置一个垂直和水平居中对齐的图像，我的 HTML 标记是
<ul class="big-wrapper">
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
<img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</div>
</li>
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
<img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</li>
</ul>
Used Css
ul.big-wrapper li > div {
height:612px;
width:612px;
}
ul.big-wrappe li {
float:left;
margin:0 20px 20px 0;
position:relative;
text-align:center;
}
After doing all those stuff i am not able to do so.Please have a look and help me.
做完所有这些事情后，我无法这样做。请看一看并帮助我。
回答by Marcel
There's a few good ways to both horizontally and vertically center an element, it just comes down to the situation and your preference.
有一些很好的方法可以水平和垂直居中元素，这取决于具体情况和您的偏好。
With the following markup:
使用以下标记：
<div><img src="a.png" width="100" height="100"></div>
line-height
行高
div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }
Good quick fix without messing with positioning too much but if actually text is being centered this way could be problematic.
很好的快速修复而不会position过多地弄乱ing 但如果实际上文本以这种方式居中可能会出现问题。
display:table-cell
显示：表格单元格
div { width:300px; height:300px; text-align:center; display:table-cell; vertical-align:middle; }
Works just like good old tables and highly flexible, however only supported in modern browsers.
就像旧表一样工作并且高度灵活，但仅在现代浏览器中受支持。
position:absolute
位置：绝对
div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }
topand leftoffsets should be set to half the respective dimensions of the element being positioned. Works well if the containing element needs to be flexible but absolute values are required to work.
top并且left偏移量应设置为被定位元素的相应尺寸的一半。如果包含元素需要灵活但需要绝对值才能工作，则效果很好。
Demo of all techniques: jsfiddle.net/Marcel/JQbea(fullscreen)
所有技术的演示：jsfiddle.net/Marcel/JQbea（全屏）
回答by moe
why not just remove the imgtags then set the image as a backgroundand center it like this:
为什么不删除img标签然后将图像设置为 abackground并将其居中，如下所示：
(doing it inline, but via external css file is the best way)
（内联执行，但通过外部 css 文件是最好的方法）
<div style="background: url('7-612x612-2.png') no-repeat center center transparent;"> </div>
