flex垂直居中失效主因是父容器高度塌缩，需设height:100vh或min-height:100vh；图片应仅用max-width/max-height+auto宽高保比例；响应式对齐应控制父容器flex属性而非img本身；须用语义化块级容器封装，避免inline元素或overflow:hidden截断。

flex容器必须有明确高度才能垂直居中

写了 justify-content: center 和 align-items: center 却没效果？大概率是父容器高度塌缩了。Flex 的垂直居中依赖交叉轴（默认为 Y 轴）有可计算长度，height: 100vh 是最直接的解法；但若容器需随内容撑高，改用 min-height: 100vh 更稳妥——既保证初始满屏，又允许内容超出时自然滚动。

常见错误包括：height: 100% 在无显式父高时无效；flex: 1 未配合父容器 display: flex; flex-direction: column 也起不了作用；还有人给图片加 position: absolute，直接让元素脱离 flex 流，对齐规则失效。

图片自身宽高设置必须保持比例

图片拉伸变形、溢出容器或在窄屏下被裁切，几乎都源于宽高声明冲突。正确做法是只设上限约束，不强制固定尺寸：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• max-width: 100% 或 max-width: 90vw（留边距）
• max-height: 80vh（防高屏过长）
• width: auto 和 height: auto 必须成对出现——这是浏览器按原始宽高比缩放的唯一可靠依据
• 绝对禁止同时写 width: 100% 和 height: 200px，这会强制拉伸

响应式对齐切换别动图片样式，改父容器

想小屏居中、大屏左对齐？不要在每个媒体查询里重复定义 img 的 margin 或 display，而是控制父容器的 flex 行为：

• 小屏：@media (max-width: 768px) { .img-container { justify-content: center; } }
• 大屏：@media (min-width: 1025px) { .img-container { justify-content: flex-start; } }
• 若用 text-align 回退方案，同样只改父容器，不碰 img 标签本身
• 注意：如果父容器用了 float 或 position: fixed，媒体查询里的 justify-content 会静默失效

避免污染全局类，封装专用容器

别把 display: flex 直接加到 .grid 或 .container 这类通用类上——它可能正被其他模块依赖为块级流布局，一改就崩。应该新建语义化容器，比如 .hero-img 或 .splash-image：

<div class="hero-img">
  @@##@@
</div>

对应 CSS 只作用于该容器，后续加暗色模式、加载过渡、aspect-ratio 保护等扩展都更安全。真正容易被忽略的是：这个容器本身不能是 inline 元素（如 <span></span>），也不能被外层 overflow: hidden 截断，否则即使 flex 生效，图片也可能被裁掉一部分。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！