display: flex + justify-content: center + align-items: center可实现水平垂直居中，但必须满足三条件：父容器设display: flex、有明确高度（如min-height: 100vh）、子元素未脱离文档流。
直接用 display: flex + justify-content: center + align-items: center，但必须确保父容器有明确高度、启用 flex 且图片未脱离文档流——缺一不可。
为什么 margin: 0 auto 或 text-align: center 不行
这两个方法只能水平居中：margin: 0 auto 对行内图片无效（得先加 display: block），且完全不控制垂直方向；text-align: center 只作用于行内子元素，且父容器若没宽度或被 float/position 干扰，就会失效。它们都无法实现“正中间”这个二维目标。
-
margin: 0 auto在图片上单独写，没加display: block→ 样式静默失效 - 父容器是
div但没设width或内容为空 → 实际宽度为 0，“居中”无空间可算 - 图片加了
position: absolute→ 脱离文档流，flex 和 text-align 都管不了它
display: flex 居中必须满足的三个硬条件
很多人写了 justify-content: center; align-items: center 却没效果，问题几乎都出在这三处：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器没设
display: flex（只给<img>加没用） - 父容器高度塌陷：比如只写了
width: 100%，没设height或min-height→align-items: center失去垂直参照 - 图片本身加了
float、position: absolute或被外层grid/inline-block容器包裹 → flex 规则被覆盖或跳过
正确写法示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> @@##@@ </div>
响应式图片尺寸怎么不溢出又保持比例
关键就一行：max-width: 100% + height: auto。前者防止宽屏下撑破容器，后者锁死宽高比，避免拉伸变形。
- 别用
width: 100%—— 它会让小图强行拉大、模糊，且在父容器缩小时无法回退 - 如果想留边距，可用
max-width: 90vw替代100%，配合height: auto依然安全 - 不用
object-fit：它适合固定尺寸容器（如卡片头图），不是全视口响应场景的首选
真正容易被忽略的是父容器高度来源——100vh 看似方便，但页面有 header/footer 时会遮挡内容；更稳健的做法是用 min-height: 300px 或根据实际区块设定最小高度，再配 height: auto 让内容撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
