如何将图像水平和垂直居中在div中

要将图像水平和垂直居中，可以遵循以下步骤：

1. 水平居中：

将图像的宽度设置为 div 元素的宽度的一半，同时将图像的宽度设置为 div 元素的水平边距的一半。具体代码如下：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 50%;
}

在此示例中，将图像的宽度设置为 div 元素宽度的一半，同时将图像的宽度设置为 div 元素的水平边距的一半。通过使用 display: block 属性，将图像设置为占位符，并使用 margin-left: auto 和 margin-right: auto 来水平居中图像。

1. 垂直居中：

将图像的高度设置为 div 元素高度的一半，同时将图像的高度设置为 div 元素的垂直边距的一半。具体代码如下：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 50%;
}

在此示例中，将图像的高度设置为 div 元素高度的一半，同时将图像的高度设置为 div 元素的垂直边距的一半。通过使用 display: block 属性，将图像设置为占位符，并使用 margin-left: auto 和 margin-right: auto 来垂直居中图像。

以上两种方式都可以实现图像在 div 元素中水平和垂直居中。根据实际使用场景，选择合适的方式即可。