flex布局实现居中需同时设置display: flex、justify-content: center和align-items: center于父容器，并确保父容器有高度（如min-height），缺一不可；仅justify-content只能水平居中。
flex布局实现完全居中最可靠
现代项目里，display: flex加两个对齐属性是唯一能稳定做到水平+垂直居中的方案，不依赖图片尺寸、不破坏响应式。但很多人只写justify-content: center，结果图片只横着动了，竖着还在顶上——因为align-items: center没加，或者父容器根本没高度。
- 必须作用在父容器上，不是
<img>自身；<img>自己不用改任何样式 - 父容器要设
height或min-height，否则align-items: center无参照，可能塌缩到看不见 - 如果父容器本身是
display: grid或display: flex，再套一层flex会干扰原有布局流 - 旧版Android 4.4及以下需补
display: -webkit-flex
示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.container { display: flex; justify-content: center; align-items: center; min-height: 300px; }
position + transform适合脱离文档流场景
当图片要盖在其他内容上（比如模态框里的logo、加载图标），position: absolute才是合理选择。它不占文档流位置，但要求父容器有定位上下文，否则top: 50%会相对于计算，一拉就偏。
- 父容器必须设
position: relative（或absolute/fixed），不能是默认的static -
left: 50%; top: 50%只是把图片左上角移到中心点，真正居中靠transform: translate(-50%, -50%) - 响应式下图片缩放时，
transform依然生效；而老式“负margin”写死像素值会失效 - 如果父容器宽高是
100vw/100vh，这个方案很稳；但如果是max-width: 800px这种流式容器，得额外检查是否溢出
示例：
.container { position: relative; height: 200px; } .container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
text-align: center只能水平居中，别指望它管上下
很多人试了text-align: center发现图片只横着居中、竖着还是贴顶——这不是bug，是CSS行内布局的底层规则：它只控制行内元素在行框内的**水平对齐位置**，和垂直方向无关。
- 这个属性必须写在父容器上，写在
<img>自己身上完全无效 - 父容器要是块级且宽度明确（比如
width: 100%），否则text-align可能没效果 - 一旦父容器用了
display: flex、display: grid、float或position: absolute，text-align会被忽略 - 如果父容器设了
font-size: 0（常用来清除inline间隙），图片可能消失或错位
示例：
<div style="text-align: center;">@@##@@</div>
margin: auto只解决水平，垂直方向它不管
margin: 0 auto确实能快速让图片左右居中，但它从设计之初就只负责水平方向。想靠它上下居中？不可能——浏览器根本不支持margin: auto auto这种写法，写了也当无效。
- 必须配合
display: block，否则<img src="a.jpg">是行内元素，margin: auto直接被忽略 - 图片要有明确宽度（比如
width: 300px或max-width: 100%），否则auto没参照，可能撑满父容器 - 父容器不能是
display: flex或display: grid，否则会覆盖块级居中逻辑 - 如果需要垂直居中，得换方案：要么给父容器加flex，要么用
line-height（仅限单行文本场景）
示例：
@@##@@真正麻烦的是同时满足「响应式」和「未知尺寸」：图片可能被
max-width: 100%压缩，也可能被height: auto拉伸，这时候flex和transform是唯二靠谱的选择，其他方法都容易在缩放或换设备时露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
