css中怎样使div居中显示图片

在网页开发中，经常会用到图片来丰富页面内容。而如何使图片在div中居中显示呢？下面就来介绍一下使用CSS如何实现。
首先，在HTML中添加一个div元素，用来容纳图片，如下所示：

<div class="image-container"><br>
    <img src="image.jpg" alt="示例图片"><br>
</div>

其中，class="image-container"是为div添加一个样式类，方便后续在CSS中进行设置。
接下来，在CSS中定义.image-container的样式，使其包含图片，并居中显示，代码如下：

p {<br>
    text-align: center; /* 水平居中 */<br>
}<br>

.image-container {<br>
    display: flex; /* 将div进行flex布局 */<br>
    justify-content: center; /* 水平居中 */<br>
    align-items: center; /* 垂直居中 */<br>
}<br>

.image-container img {<br>
    max-width: 100%; /* 图片宽度最大为div的宽度 */<br>
    max-height: 100%; /* 图片高度最大为div的高度 */<br>
    object-fit: contain; /* 图片保持比例居中展示 */<br>
}

其中，将div设置为flex布局，使得其中的子元素可以进行对齐方式的设置。通过justify-content: center;和align-items: center;可以分别实现div的水平和垂直居中。而在img元素中，将max-width和max-height分别设置为100%，表示宽度和高度最大为父元素（即div）的宽度和高度。而object-fit: contain;则表示保持图片的比例，将图片居中展示。
通过以上设置，即可实现div中图片的居中显示。