多行超链接文字居中需先设display:block或inline-block，再用Flex布局（父容器display:flex;justify-content:center;align-items:center）最可靠；line-height仅适用于单行，table-cell兼容旧IE。
超链接（<a></a>）默认是行内元素，多行文字居中不能只靠 text-align: center 就完事——它只能让文字在父容器内水平居中，垂直方向完全没控制力。真要实现「多行超链接文字」在块级容器中水平 + 垂直都居中，关键得先让 <a></a> 表现得像一个可布局的块，再选对居中方案。
给 <a></a> 加 display: block 或 inline-block
这是所有后续操作的前提。不改显示类型，height、line-height、flex 等属性对它基本无效。
-
display: block：最常用，让它独占一行，能设宽高、内边距、margin，适合按钮式链接 -
display: inline-block：保留行内流特性，适合嵌在段落中又需控制尺寸的场景，但要注意默认有基线对齐带来的空白间隙 - 别漏掉
vertical-align: middle（配合inline-block时），否则可能和旁边文字错位
用 Flex 布局居中（推荐）
现代项目首选，兼容性已覆盖 IE11+，写法干净，且天然适配多行文本、换行、响应式缩放。
- 父容器（比如
<div>）设 <code>display: flex、justify-content: center、align-items: center -
<a></a>本身保持display: block即可，不用设宽高 - 如果父容器高度由内容撑开（比如没设
height），那align-items: center会退化为按内容自然排列——此时必须给父容器明确高度或最小高度（min-height） - IE11 对
min-height在 flex 容器中的表现有 bug，若必须支持，建议用固定height或降级到table-cell - 第二行文字依然按原始行高堆叠，整体向下偏移
- 如果文字换行位置受字体、宽度影响，居中结果不可控
-
line-height是行间距倍数，不是绝对像素值；当用户缩放字号或切换系统字体时，视觉中心会漂移 - 仅当你能 100% 确保内容永远单行、容器高度固定、且无需响应式时，才考虑这个方案
- 父容器必须设
display: table，且要有显式高度（height或min-height） -
<a></a>设为display: table-cell，加vertical-align: middle和text-align: center - IE7 及更早版本不支持
table-cell，如需支持，得回退到绝对定位 +transform - 该方案对子元素内的
margin、padding行为较敏感，调试时容易误判是样式问题还是 display 模式冲突
line-height 只适用于单行，多行会失效
有人试图给 <a></a> 直接设 line-height: 100px 配合 text-align: center，这在多行场景下会出问题：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
用 table-cell 兼容老浏览器
如果项目还要跑在 IE9/10 上，display: table-cell + vertical-align: middle 仍是可靠选择，但要注意结构限制：
真正难的不是“怎么写”，而是判断「谁该承担居中责任」：是 <a></a> 自己？它的父 <div>？还是更高层容器？一旦层级错位（比如在 flex 容器里又给 <code><a></a> 加 margin: auto），就容易互相抵消或触发未定义行为。动手前先画两笔 DOM 结构，比直接套 class 更省时间。
