css中怎样使图片垂直居中

在网页程序设计中，我们经常需要将图片垂直居中，让页面看起来更加美观。本文将介绍如何使用CSS将图片垂直居中。
首先，我们需要使用HTML标签将图片添加到网页中，例如：

<div class="container">
  <img src="example.jpeg" alt="example" class="img">
</div> 

在CSS中，我们可以通过以下方式使图片垂直居中：
方法一：使用Flexbox布局
首先，我们需要将图片的父元素设置为Flexbox布局，并将其中的项目垂直居中。代码如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置容器高度 */
}
.img {
  max-width: 100%;
  max-height: 100%;
} 

在上述代码中，display: flex;将.container设置为Flexbox布局，align-items: center;将其中的项目在垂直方向上居中，而justify-content: center;将其中的项目在水平方向上居中。同时，我们将容器的高度设置为100vh，使其占据整个视口。max-width和max-height属性保证了图片不会超出容器。
方法二：使用绝对定位
另一种使图片垂直居中的方法是使用绝对定位。我们需要将图片定位到容器的中心点，并使用top和left属性微调。代码如下：

.container {
  position: relative;
  height: 100vh; /* 设置容器高度 */
}
.img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 100%;
  max-height: 100%;
} 

在上述代码中，我们设置了容器的position为relative，使得其中绝对定位的子元素参照其位置。而img元素使用绝对定位，并利用top和left调整其位置。同时，transform: translate(-50%,-50%);将图片的中心点微调至容器的中心点。max-width和max-height属性同样保证了图片不会超出容器。
通过上述两种方式，我们可以实现图片的垂直居中。在实际开发中，我们可以结合页面布局和需求选择合适的方法。