必须同时设置display: flex、justify-content: center和align-items: center，且父容器需有明确高度（如min-height: 100vh），否则align-items因交叉轴无空间而失效；子元素不能脱离文档流。
父容器必须设为 flex 且带明确高度才能垂直居中
只写 justify-content: center 不会垂直居中图片——它只管水平方向。真正起作用的是 align-items: center，但它依赖父容器有可计算的垂直空间。常见错误是给 div 加了 display: flex 却没设高度，结果图片水平居中、垂直贴顶。
实操建议：
- 视口级居中：父容器加
height: 100vh（或min-height: 300px） - 避免直接在
上设display: flex，否则所有直系子元素（比如多个<p></p>）都会变成 flex item，布局全乱 - 若用
place-items: center（Grid），同样需要父容器有尺寸上下文，不能靠内容撑高
图片自身必须加 max-width: 100% 和 height: auto
否则缩放窗口时，图片会溢出容器或拉伸变形。这不是居中问题，而是响应式前提——没有这个约束，再好的居中逻辑也会在窄屏下失效。
关键点：
-
max-width: 100%是硬性要求；width: 100%会强制拉满，破坏原始宽高比 -
height: auto必须配对使用，否则浏览器无法按比例缩放 - 如需留白，可用
max-width: 90vw替代100%，避免贴边
间距控制不能靠图片 margin，得用父容器或 wrapper
给 <img> 加 margin-bottom: 50px 看似简单，但在 flex 容器里会被 align-items 干扰；在普通流中又容易因父容器塌陷或浮动失效。
更稳的做法：
- 用外层
div包裹图片，再给这个 wrapper 设margin-bottom: 50px - 若两个图片并排，用 flex 容器统一控制子项间距：
gap: 50px（现代浏览器支持） - 旧环境（IE11）不支持
gap，改用margin-right+:last-child排除末项
媒体查询切换对齐方式时，只覆盖 justify-content 或 text-align
别在每个断点里重复写图片尺寸或重定义整个 flex 结构。响应式对齐的本质是“行为切换”，不是“样式重写”。
正确姿势：
- 小屏居中：
@media (max-width: 768px) { .img-container { justify-content: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } } - 切忌在媒体查询里又写一遍
display: flex或max-width——这些应该写在基础样式里
最容易被忽略的一点：双英雄图这类布局，必须用一个外层 flex 容器统一对齐两个子图，而不是分别给每个 .hero-image1 和 .hero-image2 加 justify-content——它们不是 flex 容器，该属性压根不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
