在网页设计中，图片是一个非常重要的元素，常常会被作为页面布局的重要组成部分。那么，在设置图片显示的位置时，如何通过 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() 函数则可以将元素移动至其自身宽度、高度的一半位置，实现居中显示。
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
- 使用 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 布局可以更方便地处理子元素的布局。不同的方法适用于不同的场景，开发者可以根据实际情况选择适合自己的方法，并进行灵活使用。
