图片默认 inline 且 vertical-align: baseline，导致底部留空；解决需用 vertical-align、display 变更、text-align（仅对 inline/inline-block 有效）、flex 或 absolute 定位，并注意对应前提条件。
图片在行内元素中默认对齐 baseline 是什么问题
HTML5 里 <img> 默认是 inline 元素，会和文字一样参与行框（line box）布局，对齐基准线是 baseline —— 这就是为什么图片下方总有一小段空白：那是为字母如 “g”、“y” 留的 descender 空间。
常见现象：
<p>文字<img src="icon.png" width="16">后面还有文字</p>，图片和文字看起来“没对齐”，实际是图片底部贴着 baseline，而文字的 baseline 在字体中间偏下位置。
- 解决最直接：给
<img>加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配合固定宽度
典型误用：
<div style="text-align: center"><img src="logo.png" style="display: block"></div>——图片不会居中，因为
block 元素无视 text-align。
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
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%防止
示例（安全写法）：
<div style="display: flex; justify-content: center; align-items: center; height: 200px;"><img src="avatar.jpg" style="max-width: 100%; height: auto;"></div>
绝对定位 + transform 实现精确居中但破坏文档流
当需要图片相对于某个容器（非整个页面）精准居中，且不希望它影响其他内容流时，可用 position: absolute 配合 transform。
- 父容器必须设
position: relative（否则absolute会往上找最近的定位祖先，可能跑到 body 去） - 图片设
position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 不推荐用于纯文本流中的图标对齐，只适用于模态框、加载指示器、装饰性覆盖图等场景
易错点：
<div style="position: relative; width: 300px; height: 200px; border: 1px solid #ccc"><img src="badge.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"></div>——漏掉
position: relative，图片就会相对 viewport 定位。
真正麻烦的不是选哪种方法，而是没意识到不同对齐目标对应不同机制：行内对齐靠 vertical-align，块级容器居中靠 margin 或 flex，绝对定位则必须配对设置父子 position。混用或漏条件，就只能看到“怎么调都不对”。
