在网页设计中，图片是一个非常重要的元素，常常会被作为页面布局的重要组成部分。那么，在设置图片显示的位置时，如何通过 css 实现图片的居中显示呢？本文将为大家介绍 css 设置居中图片的方法。
- 在 div 中设置 background-image
通过 background-image，我们可以实现最简单的图片背景设置。首先，在 HTML 中，我们定义一个 div 元素，并为其设置一个唯一的 ID：
<div id="img_div"></div>
然后，在 CSS 中，我们使用以下代码设置背景图片，并设置 background-position 属性为 center，即可实现居中显示：
#img_div {
background-image: url("image.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}其中，background-size 属性设置为 cover 可以保证图片在显示时可以按比例缩放至与容器等宽等高。
- 使用 position 和 margin 实现图片居中
对于图片元素本身，我们可以通过设置其 position 属性和 margin 属性来实现居中显示。首先，在 HTML 中，我们定义一个 img 元素，并设置一个唯一的 ID：
立即学习“前端免费学习笔记（深入）”；
<img id="img_elem" src="image.jpg" / alt="浅析css设置居中图片的几种方法" >
然后，在 CSS 中，我们可以将其 position 设置为 absolute，再调整其 margin 值，即可实现居中显示：
#img_elem {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}其中，设置 left 和 top 属性为 50%，将元素定位到父容器中心位置，而 transform 属性的 translate() 函数则可以将元素移动至其自身宽度、高度的一半位置，实现居中显示。
- 使用 flex 布局实现图片居中
flex 布局是 CSS3 中的重要特性之一，可以非常方便地实现元素的布局。其中，可以通过设置 flex 容器的 justify-content 和 align-items 属性来实现容器中子元素的水平和垂直居中对齐。接下来，我们来看一下如何实现图片的居中显示。
首先，在 HTML 中，我们定义一个 div 元素，并设置一个唯一的 ID：
<div id="img_div"> <img src="image.jpg" / alt="浅析css设置居中图片的几种方法" > </div>
接着，在 CSS 中，我们设置该 div 元素为 flex 容器，并设置 justify-content 和 align-items 属性为 center，即可实现图片居中显示：
#img_div {
display: flex;
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
}这样，设置了图片所在 div 元素的这些属性后，其子元素 img 就可以自动实现居中显示了。
总结
以上就是 CSS 设置居中图片的几种方法。其中，使用 background-image 和 position + margin 的方法较为简单，而使用 flex 布局可以更方便地处理子元素的布局。不同的方法适用于不同的场景，开发者可以根据实际情况选择适合自己的方法，并进行灵活使用。
