需要通过 CSS 在网页中居中图像
Posted
技术标签:
【中文标题】需要通过 CSS 在网页中居中图像【英文标题】：Need to center image in web page via CSS 【发布时间】：2011-01-30 22:14:18 【问题描述】：即使在调整浏览器大小时，我也希望将图像在页面中垂直和水平居中。
目前，我使用这个 CSS：
.centeredImage
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
还有这个 html：
<img class="centeredImage" src="images/logo.png">
它以 FF 为中心，但不在 IE 中（图像中心位于左上角）。有什么想法吗？
-机器人
【问题讨论】：
你“知道”图像高度吗？ 是的，尽管显然额外的信用问题是如何对任何图像进行通用处理。 【参考方案1】：我是这样解决的：
img.class-name
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
【讨论】：
适用于当前版本的 Opera、Chrome、Firefox 和 Safari。 IE 有人吗？【参考方案2】：试试这个：
position: absolute
【讨论】：
成功了……现在尝试让它适用于任何动态调整图像宽度和高度的图像。 jquery 会帮助你。 @Tesserex 从什么时候开始 jQuery 被认为是 CSS？【参考方案3】：通用的 KISS（“保持简单和愚蠢”）方式：
<p style="text-align: center;"> <img src="myImage.png" /></p>
【讨论】：
【参考方案4】：这是一个棘手的方法，但它有效：
CSS：
html, body, #wrapper
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
#wrapper td
vertical-align: middle;
text-align: center;
HTML：
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" /></td>
</tr>
</table>
</body>
</html>
【讨论】：
【参考方案5】：text-align:center;
vertical-align:middle;
vertical-align
应该是诀窍
【讨论】：
请注意，text-align 需要应用于容器，而不是图像。垂直对齐对我也不起作用，用 IE7 测试。【参考方案6】：如果提供的答案在每个浏览器中都不起作用和/或不一致，您可能想试一试：
http://andreaslagerkvist.com/jquery/center/
text-align:center;
不过应该得到它。
【讨论】：
那个jQuery插件看起来很棒，虽然我用的是ExtJS，所以我得看看能不能翻译一下。 啊，可能存在等效插件。不熟悉 ExtJS。【参考方案7】：明确：两者都有； 边距：自动；
【讨论】：
【参考方案8】：解决方案：
.centeredImage
position: absolute;
top: 50%;
left: 50%;
margin-top: image-height/2;
margin-left: image-width/2;
既然你提到了：
margin-top: -50px;
margin-left: -150px;
如果它与中心正确对齐，那么您的图像高度将为 50x2=100px； & 宽度 150x2=300px;
【讨论】：
【参考方案9】：.image
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
【讨论】：
【参考方案10】：我做到了！这种方法坚如磐石，适用于所有主要浏览器。
style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"
我只使用了图像一半宽度的左侧，然后使用边距将其分流。工作一种享受:)
【讨论】：
您是否在不同的窗口宽度下尝试过这个 - 即响应式？【参考方案11】：有一个非常简单的跨浏览器自动调整大小的方法。拍摄宽度为 200 像素的图像。取一半宽度，然后执行以下操作：
#imgcent1
left: calc (100% - 100px / 2 );
/*rest of code*/
确保有“空白”以避免负数和正数（最好对所有操作数使用此约定）。它会自动调整大小。试试吧，希望在其他浏览器上的测试能确保它成为预期的标准。
【讨论】：
【参考方案12】：IE 与 position: fixed 存在问题（以及其他一百万个问题），因此如果兼容性很重要，我建议不要这样做。
如果容器不必滚动，请使用position: absolute。否则，您将需要一些 js 来在滚动时调整图像的顶部和左侧。
text-align: center 如果应用于图像的容器应该可以工作，但不能应用于图像本身。但当然，这只涉及水平，而不是垂直。 vertical-align: middle 对我不起作用，即使容器足够大。
自动边距在 IE 中不起作用，至少在我测试时是这样。
【讨论】：
【参考方案13】：网络上的单个图像和响应式
背景图片：
/image.png
CSS：
html, body height: 100%; margin: 0px;
.bg-image
width: 100%;
height: 100%;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: -9999px;
HTML：
<body>
<div class="bg-image">Some text not displayed</div>
</body>
【讨论】：
以上是关于需要通过 CSS 在网页中居中图像的主要内容，如果未能解决你的问题，请参考以下文章