图片在容器中对齐应使用CSS而非废弃的align属性；推荐flex布局（display: flex + justify-content/align-items）实现水平垂直居中，其次可用text-align（行内级容器）、margin: auto（块级图片）或position+transform（绝对定位）。
图片在容器中的对齐位置，不能靠 <img align="...">（已废弃），而是用 CSS 控制。核心是明确容器的显示方式（如 block、flex、grid）和图片本身的定位逻辑。
用 text-align 让图片水平居中（适用于行内级容器）
如果图片在 <div> 里且没设宽高，容器是默认的块级元素，图片作为行内元素，可用 text-align 控制其水平对齐：
<div style="text-align: center;"> <img src="logo.png" alt="logo"> </div>
✅ 适用：单张图、简单布局、不需要垂直对齐。
❌ 不适用于多图并排或需要上下居中的场景。
用 Flex 布局精准控制水平+垂直居中
这是最常用、最可靠的方式。给容器设 display: flex，再用 justify-content（主轴）和 align-items（交叉轴）控制：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; justify-content: center; align-items: center; height: 300px; border: 1px solid #ccc;"> <img src="icon.png" alt="icon"> </div>
-
justify-content：控制水平方向 —
flex-start（左）、center（居中）、flex-end（右） -
align-items：控制垂直方向 —
flex-start（顶）、center（居中）、flex-end（底） - 容器需有明确高度（如
height: 300px）才能看到垂直居中效果
用 margin: auto 实现块级图片居中
当图片设为 display: block 后，左右 margin: auto 可让它水平居中：
<div style="width: 400px; border: 1px solid #ddd;"> <img src="banner.jpg" alt="banner" style="display: block; margin: 0 auto;"> </div>
✅ 简单直接，适合固定宽高的图。
⚠️ 垂直方向不生效，如需上下居中，得配合容器 line-height 或 flex。
用 position + transform 做绝对定位居中
适合需要脱离文档流、精确定位的场景（比如遮罩层上的图标）：
<div style="position: relative; width: 500px; height: 300px; border: 1px solid #999;"> <img src="logo.png" alt="logo" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> </div>
- 先用
top: 50%; left: 50%把图片左上角移到容器中心 - 再用
transform: translate(-50%, -50%)自身回退一半宽高，实现真正居中 - 容器必须设
position: relative作为定位参考
不复杂但容易忽略：对齐效果取决于容器的 display 类型和尺寸是否明确。优先推荐 flex 方案，兼容性好、逻辑清晰、一行代码就能同时搞定水平和垂直对齐。
