CSS 居中超大图片在div中

在本文中，我们将介绍如何使用CSS将超大的图片居中显示在一个div中。

阅读更多：CSS 教程

方法一：使用background-image属性

一种方法是将图片作为div的背景图片，然后使用background-position属性将其居中。

.div-container {
  width: 500px;
  height: 500px;
  background-image: url("image.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

在上面的示例中，我们定义了一个宽度和高度为500px的div，将图片”image.jpg”设置为背景图片，并且使用background-position属性将其居中显示。使用background-size属性可以控制背景图片的大小，使用background-repeat属性可以决定是否重复显示背景图片。

方法二：使用绝对定位和负边距

另一种方法是使用绝对定位和负边距将图片居中。

.div-container {
  position: relative;
  width: 500px;
  height: 500px;
}

.img-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-container img {
  max-width: 100%;
  max-height: 100%;
}

在上面的示例中，我们定义了一个宽度和高度为500px的div，并使用绝对定位将子元素.img-container放置在div的中央。然后，使用transform属性和负边距将.img-container居中显示。为了确保图片不超出父元素的范围，我们将.img-container img的max-width和max-height属性设置为100%。

方法三：使用flexbox布局

还有一种方法是使用flexbox布局来居中图片。

.div-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}

.img-container img {
  max-width: 100%;
  max-height: 100%;
}

在上面的示例中，我们利用flexbox布局将div中的元素居中显示。通过将display属性设置为flex，justify-content属性设置为center和align-items属性设置为center，我们可以使子元素在水平和垂直方向上都居中显示。

这样，无论图片的大小和div的尺寸如何，图片都将被居中显示在div中。