在 div 中居中背景图像答案

【问题标题】：Centering a background image inside a div在 div 中居中背景图像
【发布时间】：2015-10-15 21:40:30
【问题描述】：

我正在尝试将 div 中的图像居中，它接近了，但仍然没有真正居中。图像为 976x976 像素。下面是 CSS：

div {

     margin-left: auto ;
     margin-right: auto ;
     border:1px solid #ccc;
     max-width:976px;
     height:976px;
     min-width: 433px;
     padding:0;
     background: url("images/background.png") center center no-repeat;
}

图片必须居中，但右上角和右下角过高，即：

【问题讨论】：

background: url("images/background.png") 无重复中心中心； ?
如果该页面已上线，您能否发布该页面的链接？我们需要查看图片和代码。
将 text-align: center; 添加到您的 div 中。如果那不这样做，您将不得不在这里向您展示 html（我假设您将“图像”居中，而不是像您的 css 中显示的“背景图像”，顺便说一句。
汤姆，我在努力（中心中心）。 Nerdwood，链接：cruzbranca.com/test/index.htmlRAEC，我加了 text-align，还是一样。
问题是您的图像比您的 div 的大小大，因此它不会准确定位在您的 div 的中心。不是最好的方法，但你可以尝试使用这个：background: url("images/background.png") no-repeat 50% 18.5%;@LeandrosLópez

标签： css image background

【解决方案1】：

查看您提供的 URL，我发现由于 bgimage 大于 div 本身，因此定位背景图像确实更靠近顶部。因此，您需要使用百分比。

background: url("images/background.png") no-repeat 50% 18.5%;

可以解决您的问题并将图像放置在 div 的中心

【讨论】：

这与 OP 发布的内容有何不同，如何解决问题？
这与我在帖子中所说的不同！将背景属性更改为背景图像就可以了。在这种情况下，带有背景图像的 div 将始终位于屏幕的中心。 @torazaburo
真的吗？我原以为将 url 指定为速记属性的一部分完全等同于将其指定为 background-image 的值。我不知道您所说的“正如我在帖子中所说的那样”是什么意思。你在你的帖子里什么都没说。您刚刚发布了一些代码。
在某些情况下，是的！在其他情况下不是！但是查看 Leandros López 提供的网站，有不同的问题。他希望背景图像位于 div 的中心，但 bg 图片的大小与 div 的大小不同 @torazaburo
如果这是问题所在，请发布一个解决方案，说明这是问题所在，而不是建议将速记属性无意义地重写为单个属性。

【解决方案2】：

似乎工作正常？？我改变了你的速记 css 的顺序并使用 50% 而不是中心。

div {
  position: absolute;
  width: 100%;
  height: 100%;
}

div {
  
     margin-left: auto ;
     margin-right: auto ;
     border:11px solid red;
     max-width:976px;
     height:976px;
     min-width: 433px;
     padding:0;
     background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}

&lt;div&gt;&lt;/div&gt;

链接上的图片是矩形图片，顶部是圆形，因此不是正方形。

裁剪该图像以使您的代码正常工作！

【讨论】：

我不认为你想促进每个<div> 都是绝对定位的。
LOL @Rotan075，我只是在保持 OP 代码的同时强制 div 为 100% 的高度和宽度。
为什么要更改简写CSS的顺序？
因为顺序不正确。图像 - 重复 - 位置是正确的顺序
该页面仅列出属性；它并没有说它们必须按照这个顺序。请咨询 MDN 之类的可靠来源，其中明确指出“以任何顺序”（developer.mozilla.org/en-US/docs/Web/CSS/background）。