纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

引言

在Web开发中，经常会遇到需要将图片居中显示于某个容器（如DIV）中的情况。有时图片的尺寸未知，我们需要使用纯CSS的方法来实现水平垂直居中。本文将介绍一种实现方式，并提供了美化效果。

实现方法

我们可以使用flex布局来实现图片的水平垂直居中，而且可以适应不同尺寸的图片。

首先，创建一个DIV容器，并设置其样式为display: flex;，这样DIV内部的元素将自动居中。

接下来，为这个DIV容器添加3个子元素：一个空的占位元素、一个存放图片的容器、以及一个包裹图片的div。图片的尺寸将会根据这个div来决定。

为存放图片的容器设置flex: 1;，使其占据父元素的空间。

最后，将图片的div设置为display: inline-block;，并添加vertical-align: middle;属性，使其文字垂直居中。

下面是一个示例的CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  height: 250px;
}

.placeholder {
  flex: 1;
}

.image-wrapper {
  display: inline-block;
  vertical-align: middle;
}

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

使用示例

在HTML中，使用以下代码将图片嵌入到DIV容器中：

<div class="container">
  <div class="placeholder"></div>
  <div class="image-wrapper"><img src="path/to/image.jpg" alt="Image"></div>
  <div class="placeholder"></div>
</div>

在这个示例中，图片将被调整为适应div容器的大小，并水平垂直居中显示。

美化效果

为了提升用户的视觉体验，我们可以添加一些美化效果。例如，当鼠标悬停在图片上时，添加过渡效果和阴影效果。

以下是一个示例的CSS代码：

.image-wrapper:hover img {
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

这样，当鼠标悬停在图片上时，将会平滑地添加阴影效果。

总结

通过使用flex布局和一些CSS样式，我们可以实现图片的水平垂直居中，而不论其尺寸的大小。此外，我们还可以添加一些美化效果，提升用户的视觉体验。

希望本文对你有所帮助，如有疑问或建议，请随时留言。谢谢阅读！