使用 css 定位图像的中心答案

【问题标题】：Position the center of an image using css使用 css 定位图像的中心
【发布时间】：2012-12-10 22:31:24
【问题描述】：

假设我必须将图像 RIGHT 放置在正确的位置，但我需要它的 CENTER 位于该位置。我想将图像放置在 div 的左上角，所以我将图像放置在 div 中，将位置：相对于 div 和位置：绝对值设置为图像，然后将其顶部和左侧值设置为 0。它非常有效，但我需要该图像的中心位于左上角。我会手动设置顶部：-xpx，左侧：-ypx 但我没有图像大小的任何特定值（可能会有很大差异）。那么有什么办法可以说： position: absolute-but-i'm-talking-about-the-center;顶部：0px；左：0px；？

真的非常感谢！

马特奥

【问题讨论】：

标签： html css image positioning center

【解决方案1】：

您可以使用 javascript 获取图像的大小，然后设置所需的 css left 值。

请注意图像的加载方式，因为它们是异步的，因此在文档准备好时不一定可用。这意味着除非您正确处理图像，否则最终的宽度和高度尺寸将为 0。

【讨论】：

【解决方案2】：

你试过了吗？

name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }

试一试。

【讨论】：

这不也需要 div 的宽度声明吗？

【解决方案3】：

您应该将图像包裹在另一个块元素中，并在图像的左侧放置一个负数。

类似这样的：

<div id="something">
  <div class="imagewrap">
    <img>
  </div>
</div>

然后给#something 一个相对位置，.imagewrap 一个绝对位置，等等......并且img 应该与left:-50% 有一个相对位置。顶部也一样。

【讨论】：

【解决方案4】：

无需使用 Javascript，这可以在 CSS 中完成。

所需的HTML：（显然必须将div更改为img）

<div id="container">
  <div id="imgwrapper">
    <div id="img">Change this div-tag to an img-tag</div>
  </div>
</div>

所需的 CSS：

#container
{
  position: absolute;
  left: 200px;
  top: 100px;
  height: auto;
  overflow: visible;
  border: 2px dashed green;
}
#imgwrapper
{
  position: relative;
  margin-left: -50%;
  margin-top: -50%;
  padding-top: 25%;
  border: 2px dashed blue;
}
#img
{
  display: block;
  width: 200px;
  height: 100px;
  border: 2px solid red;
}

Click here for a jsFiddle link

margin-left: 50%; 显然在使用容器 div 时有效，因为容器的宽度将与内容的宽度完全相同。（您可能需要添加width: auto;）但是margin-top: -50%; 将不起作用，因为容器 div 的高度会随之改变，因此您需要另一个包装器 div，在其中使用此margin-top: -50%;，然后您需要通过使用基于正百分比来修复它所产生的错误填充。显然可能有其他解决方案来解决这个问题，但解决方案应该是这样的。

【讨论】：