需要通过 CSS 在网页中居中图像答案

【问题标题】：Need to center image in web page via CSS需要通过 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 中（图像中心位于左上角）。有什么想法吗？

-机器人

【问题讨论】：

你“知道”图像高度吗？
是的，尽管显然额外的信用问题是如何对任何图像进行通用处理。

标签： css image center

【解决方案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" alt="hello world" /></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>

【讨论】：