对未知高度的图片设置垂直居中的方法详解

下面是「对未知高度的图片设置垂直居中的方法详解」的攻略：

下面是「对未知高度的图片设置垂直居中的方法详解」的攻略：

1. 使用CSS3的Transform属性

我们可以使用CSS3的Transform属性来实现垂直居中的效果。具体的做法是：

将图片设置为绝对定位，然后设置父元素的position属性为相对定位。接着，设置图片的top和left值为50%，并使用Transform属性进行平移。

代码示例：

HTML

<div class="parent">
  <img src="example.jpg" />
</div>

CSS

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

这样，图片就会垂直居中了。

2. 使用Flexbox布局

Flexbox布局的垂直居中效果非常好，而且比Transform属性的代码更简洁。

代码示例：

HTML

<div class="parent">
  <img src="example.jpg" />
</div>

CSS

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}

这样，图片就会垂直居中了。同时，父元素的高度会自动根据图片的高度进行调整。

以上就是「对未知高度的图片设置垂直居中的方法详解」的攻略，希望可以对您有所帮助。