图片默认 inline 且 vertical-align: baseline，导致底部留空；解决需用 vertical-align、display 变更、text-align（仅对 inline/inline-block 有效）、flex 或 absolute 定位，并注意对应前提条件。
图片在行内元素中默认对齐 baseline 是什么问题
HTML5 里 inline 元素，会和文字一样参与行框（line box）布局，对齐基准线是 baseline —— 这就是为什么图片下方总有一小段空白：那是为字母如 “g”、“y” 留的 descender 空间。
常见现象：
，图片和文字看起来“没对齐”，实际是图片底部贴着 baseline，而文字的 baseline 在字体中间偏下位置。文字@@##@@后面还有文字
- 解决最直接：给
vertical-align: middle或top或bottom -
vertical-align: middle对齐的是父行框的 middle（不是父容器正中），适合图文混排时视觉居中 - 若想彻底脱离行框干扰，把
display改成block或inline-block后再用text-align/margin控制
用 CSS 的 text-align 控制图片水平居中是否有效
text-align 只对 inline 和 inline-block 子元素起作用，所以它能控制图片水平对齐，但有前提：
- 图片本身必须是
inline（默认）或inline-block - 父容器需设置
text-align: center（或left/right） - 如果图片是
block元素（比如加了display: block），text-align就完全无效，此时得用margin: 0 auto配合固定宽度
典型误用：
——图片不会居中，因为@@##@@
block 元素无视 text-align。
立即学习“前端免费学习笔记（深入）”；
Flexbox 布局中图片对齐更可靠但要注意 flex 容器定义
Flex 是目前最可控的图片对齐方式，但容易漏掉关键一步：父容器必须显式声明 display: flex，否则所有 justify-content / align-items 都不生效。
- 水平居中：
justify-content: center -
垂直居中（需父容器有高度）：
align-items: center - 单张图片独占一行并居中：
flex-direction: column+ 上述两项 - 注意
img默认是min-width: auto，若图片超宽，可能溢出；可加max-width: 100%防止
示例（安全写法）：
@@##@@
绝对定位 + transform 实现精确居中但破坏文档流
当需要图片相对于某个容器（非整个页面）精准居中，且不希望它影响其他内容流时，可用 position: absolute 配合 transform。
- 父容器必须设
position: relative（否则absolute会往上找最近的定位祖先，可能跑到 body 去） - 图片设
position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 不推荐用于纯文本流中的图标对齐，只适用于模态框、加载指示器、装饰性覆盖图等场景
易错点：
——漏掉@@##@@
position: relative，图片就会相对 viewport 定位。
真正麻烦的不是选哪种方法，而是没意识到不同对齐目标对应不同机制：行内对齐靠 vertical-align，块级容器居中靠 margin 或 flex，绝对定位则必须配对设置父子 position。混用或漏条件，就只能看到“怎么调都不对”。
