如何在较大的div中使图像居中（垂直和水平）？

个人而言，我会将图像放置在div的背景中，CSS代码如下：

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

（假设有一个id为“demo”的div，因为您已经指定了高度和宽度，添加背景不应该有问题）

让浏览器来处理。

这通常是最好的答案，除非图像的大小可能小于或大于容器的大小。在“小于”情况下，它将正常工作，但在“大于”情况下，您的图像将被裁剪。

如果您希望添加ALT属性，则不太友好于SEO/读者。

如果我们使用精灵图怎么办？我正在尝试居中背景图像，但我正在使用CSS精灵图。有什么想法吗？

这不是一件容易的事情。但是，如果您知道div的精确尺寸并且在精灵图中的图像周围留有足够的透明空间，以便不显示精灵图上的其他图像，那么您可以做到。

这是一个更好的解决方案：css-tricks.com/snippets/css/…。也被K建议。

我的图像尺寸总是不同，当图像尺寸不同时如何应用此方法？

请使用`left: 50%`代替。

如何使图像在较大的div中居中（垂直和水平）的问题的出现原因是需要在不同浏览器中实现图像的水平和垂直居中。在旧的浏览器（IE >= 8）中，可以使用绝对定位和自动边距结合的方式来实现。这种方法可以使用相对定位将元素的位置基于父元素的位置。然而，这种方法在IE < 9的浏览器中不起作用。

解决方法是将div设置为相对定位，然后在img样式中添加以下属性：position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;。这样可以将图像水平和垂直居中在div中。此方法在所有浏览器中都有效，但不适用于IE < 9。

在此方法中，可以通过省略top和bottom属性来仅水平居中，通过省略right和left属性来仅垂直居中。还可以通过添加max-width:100%; height:auto;属性来强制图像适应父容器的宽度。

此方法的缺点是无法再强制图像从父宽度中缩小，解决方法是将max-height: 100%; max-width: 100%;属性添加到样式中，以使图像完全适应div。

此外，还可以使用inset: 0;代替top: 0;、left: 0;等属性来实现相同的效果。

总之，这种方法是在所有主要浏览器中实现图像在较大的div中水平和垂直居中的唯一解决方案。

问题的原因是希望在一个较大的div中使图片垂直和水平居中，但不知道div的高度。文章中提到了一种使用表格的方法来解决这个问题，但同时也指出应该尽可能只使用CSS。然后文章中列举了一些关于使用表格的讨论和争论，有人认为使用表格是不可取的，有人认为在某些情况下使用表格是合理的。最后，文章指出在设计响应式布局时，有时候并不知道图片的大小，这时使用表格是一种解决方案。文章最后指出，对于使用表格和CSS进行布局的争论没有必要，应该根据具体情况选择最灵活的解决方案。