要让div内的图片居中，可通过CSS布局方法实现，常用Flex布局：给div设置display:flex，再添加justify-content:center和align-items:center，可同时实现水平和垂直居中；Grid布局类似，设置display:grid后用place-items:center，若仅需水平居中，可设div为text-align:center，图片为display:inline-block或margin:0 auto，垂直居中还可结合line-height（需div固定高度且图片为行内元素），注意图片需设置max-width:100%避免溢出，根据布局需求选择合适方法，灵活调整样式即可实现div内图片的居中显示。
CSS实现div内图片居中的多种方法详解
在网页布局中，将div内的图片实现水平与垂直居中是常见需求，这一技巧不仅能显著提升页面的视觉美观度，还能优化用户浏览体验，CSS提供了多种实现图片居中的方法，本文将系统解析这些技术的原理、代码实现及适用场景,助开发者灵活应对不同布局挑战。
为什么需要图片居中？
图片居中是网页设计中的基础且重要的技巧，无论是产品展示、文章配图还是Banner设计，居中的图片能使页面布局更规整、视觉焦点更突出，常见的居中需求包括：水平居中（图片在div内左右居中）、垂直居中（图片在div内上下居中）以及完全居中（同时满足水平和垂直居中）。
实现图片居中的核心方法
方法1：Flex布局（现代布局首选）
Flex（弹性布局）是CSS3中强大的布局方式，通过设置父容器的`display: flex`，结合`justify-content`和`align-items`属性，可高效实现图片的水平、垂直或完全居中。
原理：
display: flex：将div转换为弹性容器，子元素（图片）默认沿主轴（水平方向）排列。justify-content: center：控制主轴（水平方向）对齐方式为居中。align-items: center：控制交叉轴（垂直方向）对齐方式为居中。
代码示例：
<div class="flex-container"> <img src="example.jpg" alt="居中图片"> </div>
.flex-container {
width: 400px;
height: 300px;
border: 2px solid #ccc; /* 演示用边框，实际开发可删除 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 防止图片过大时溢出 */
}
img {
max-width: 100%; /* 图片自适应容器宽度 */
max-height: 100%; /* 图片自适应容器高度 */
object-fit: contain; /* 保持图片比例 */
}
适用场景：
- 现代浏览器（IE11+、Chrome、Firefox、Safari等）。
- 需同时实现水平/垂直居中或复杂弹性布局的场景。
- 代码简洁，可维护性高,推荐优先使用。
方法2：Grid布局（二维布局利器）
Grid（网格布局）是CSS3中另一强大布局方式，通过设置父容器的`display: grid`，结合`place-items`属性,可快速实现图片居中。
原理：
display: grid：将div转换为网格容器。place-items: center：简写属性，同时设置`align-items`（交叉轴居中）和`justify-items`（主轴居中）。
代码示例：
<div class="grid-container"> <img src="example.jpg" alt="居中图片"> </div>
.grid-container {
width: 400px;
height: 300px;
border: 2px solid #ccc;
display: grid;
place-items: center; /* 同时水平和垂直居中 */
}
img {
max-width: 100%;
max-height: 100%;
grid-area: 1 / 1; /* 可选：明确指定位置 */
}
适用场景：
- 现代浏览器（IE11部分支持，Edge/Chrome/Firefox等完美支持）。
- 需二维布局控制（行和列同时管理）的场景。
- 代码比Flex更简洁,适合单容器居中需求。
方法3：Text-Align + Line-Height（经典水平居中方案）
仅需水平居中时，利用``默认的行内元素特性，通过父容器的`text-align`实现。
原理：
text-align: center：使行内元素（如``）在父容器内水平居中。
- 垂直居中需配合`line-height`（需图片高度与容器高度一致）或`vertical-align`。
代码示例：
<div class="text-container"> <img src="example.jpg" alt="居中图片"> </div>
.text-container {
width: 400px;
height: 300px;
border: 2px solid #ccc;
text-align: center; /* 行内元素水平居中 */
line-height: 300px; /* 辅助垂直居中（需图片高度=容器高度） */
}
img {
vertical-align: middle; /* 优化垂直对齐 */
max-height: 100%; /* 防止溢出 */
}
适用场景：
- 仅需水平居中的简单布局。
- 兼容性极佳（所有浏览器支持）,适合旧项目。
方法4：Margin Auto（块级元素居中方案）
将图片转换为块级元素后，通过`margin: auto`实现水平居中；垂直居中需配合绝对定位。
