css如何使图片上下居中

在CSS中，我们可以使用多种方法来使图片上下居中，以下是一些常见的方法：

1、使用display: flex和align-items: center属性：这种方法适用于父元素是一个弹性盒子模型的元素，我们需要将父元素设置为弹性盒子模型，然后使用align-items: center属性使子元素(即图片)在垂直方向上居中。

.parent {
  display: flex;
  align-items: center;
}

2、使用position: relative和`top: 50%`、`transform: translateY(-50%)`属性：这种方法适用于父元素不是弹性盒子模型的元素，我们需要将父元素设置为相对定位，然后使用`top: 50%`和`transform: translateY(-50%)`属性使子元素(即图片)在垂直方向上居中。

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

3、使用line-height属性：这种方法适用于父元素的高度已知的情况，我们可以通过设置父元素的line-height属性与高度相等，然后设置子元素(即图片)的vertical-align属性为底部，使图片在垂直方向上居中。

.parent {
  height: 200px; /* 假设这是父元素的高度 */
  line-height: 200px; /* 使父元素的行高等于高度 */
}
img {
  vertical-align: bottom; /* 使图片在垂直方向上居中 */
}

4、使用绝对定位和负边框：这种方法适用于需要精确控制图片位置的情况，我们可以设置父元素的宽度和高度，然后使用绝对定位和负边框使子元素(即图片)在垂直方向上居中。

.parent {
  width: 300px; /* 假设这是父元素的宽度 */
  height: 300px; /* 假设这是父元素的高度 */
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上就是使图片上下居中的四种常见方法，希望对你有所帮助。