最快解决水平居中是给父容器设 text-align: center；图文垂直错位需给图片加 vertical-align: middle；全居中用父容器 flex 布局并设 justify-content 和 align-items。
给父容器加 text-align: center 最快解决水平居中
超链接（<a>）里包着图片和文字，默认都是行内级元素，只要把它们一起放进一个块级容器（比如 <div> 或 <p>），然后在该容器上设置 text-align: center，整行内容就水平居中了。
常见错误现象：<a href="#"><img src="x.png">点我</a> 单独给这个 <a> 加 text-align: center —— 没用，因为 <a> 默认是行内元素，不接受 text-align；必须加在它的父级上。
- 正确写法：
<div style="text-align: center"><a href="#"><img src="x.png">点我</a></div> - 如果父容器用了
float、display: inline-block或宽度被压缩，text-align可能失效 - 该方法不处理垂直方向，文字和图片默认基线对齐，可能看起来“偏高”或“偏低”
vertical-align: middle 修复图文上下错位
即使水平居中了，<img> 和旁边的文本常会一高一低——这是默认的 vertical-align: baseline 在作怪。只需给图片加 vertical-align: middle，就能让图文视觉对齐。
注意：vertical-align 只对行内级和表格单元格生效，不能用在 flex 或 grid 子项上；也不影响块级元素。
立即学习“前端免费学习笔记（深入）”；
- 示例：
<img src="icon.png" style="vertical-align: middle; margin-right: 8px;">下载文档 - 若文字行高较大，可同步调大
line-height配合vertical-align: middle - 避免混用
float和vertical-align，容易触发不可预测的布局行为
需要垂直+水平居中？用 flex 但别动 <a> 自身
如果整个超链接要居中到页面中央（比如登录按钮、banner 入口），就得脱离纯行内逻辑，改用 flex 布局。关键：display: flex 必须加在 <a> 的父容器上，不是 <a> 自己。
常见翻车点：给 <a> 加 display: flex —— 它不是容器，加了没意义；或者只写 justify-content: center 忘了 align-items: center，结果只水平居中、垂直仍贴顶。
- 必须同时设：
display: flex、justify-content: center、align-items: center - 父容器要有高度参照，比如
min-height: 100vh或固定height，否则align-items无效 - 旧 Android（4.4 及以下）需加
display: -webkit-flex
响应式场景下慎用 margin: 0 auto 直接作用于 <a>
有人想让超链接自己当块级元素居中，于是加 display: block + margin: 0 auto。这可行，但极易出问题：一旦 <a> 里包含图片且未设宽，或用了 max-width: 100%，margin: 0 auto 就会失效。
更麻烦的是，<a> 被设成 block 后，内部图文默认换行，破坏原本的行内排版意图。
- 若真要用，必须显式限定宽度：
<a href="#" style="display: block; width: 200px; margin: 0 auto;"><img>文字</a> - 图片记得加
display: inline-block或vertical-align: middle，否则会撑高整行 - 移动端视口缩小时，固定宽度可能溢出，建议优先用
flex或text-align配合相对单位
真正难的不是怎么写，而是判断当前结构里哪个元素该承担“容器”角色、哪个属性实际起效。多看浏览器开发者工具里的 computed 样式，比死记规则管用得多。
