你是不是也遇到过这样的困扰：明明把图片放进div里了，结果它就是不听话地偏左、偏右，或者干脆“挤”到页面边缘？别急，今天我们就来聊聊——img在div中水平居中这个看似简单却常让人抓狂的小问题。
📌 问：为什么img默认不在div里居中？
答：因为img是行内元素（inline），它的默认行为是“贴着父容器左边对齐”，就像一个调皮的孩子站在教室第一排，根本不会自己挪位置。除非你主动给它加样式，否则它只会老老实实靠左。
✅ 案例真实分享：我之前写一篇美食探店笔记，用div包裹一张煎牛排的高清图，结果发布后发现图片左偏，整个排版显得很乱。后来才发现——原来是忘了设置水平居中！
💡 解法一：最常用——margin: 0 auto;
给img加一句CSS：margin: 0 auto; 就能搞定！前提是img要有固定的宽度（比如width: 50% 或 width: 300px），这样浏览器才知道“左右各留多少空间”。
🌰 示例代码：
<div class="container"> <img src="steak.jpg" alt="煎牛排" style="width: 300px; margin: 0 auto;"></div>
💡 解法二：flex布局（推荐！）
如果你用的是现代项目，直接让父div变成flex容器，再用justifycontent:center，图片瞬间就居中啦！优雅又灵活，适合移动端适配。
🌰 示例代码：
.container { display: flex; justifycontent: center;}✨ 小贴士：如果图片太宽撑满屏幕怎么办？记得给div设置maxwidth，避免图片溢出，保持美观。
🌟 总结一下： img居中 ≠ 自动居中，需要手动控制； margin: 0 auto 是经典方案，适合传统布局； flex布局更现代，兼容性好，适合新项目。 别再让图片“掉队”啦，动手试试，你的文章瞬间高级感拉满！
👉 快去翻翻你最近发的朋友圈或小红书图文，有没有被图片“拖后腿”的情况？现在就改过来吧～
