text-align: center 是最直接、轻量且语义正确的水平居中方法，适用于卡片内默认行内的 标签；需作用于父容器（如 .card），并确保 未被设为 display: block 等脱离行内流的样式。
卡片里用 text-align: center 最直接
超链接 <a></a> 默认是行内元素，和文字、图片一样，只要它在块级容器（比如卡片的 <div class="card">）里，就该由父容器控制水平对齐方式。<code>text-align: center 是最轻量、最符合语义的做法。
常见错误现象：<a></a> 自己加 margin: 0 auto 无效——因为它不是块级元素，不响应 auto 外边距。
- 给卡片容器（如
.card）设置text-align: center - 确保
<a></a>没有被设成display: block或flex等会脱离行内流的样式（除非你另有布局意图） - 如果卡片里还有其他行内内容（比如图标、文字），它们也会一并居中，这是预期行为
想让整个链接块（含 padding）居中，得先变块级
当你要点击区域更明确、或者加了背景色/圆角/内边距后希望这个“按钮式链接”整体居中时，<a></a> 就得显式变成块级或行内块级。
常见错误现象：只加 display: block 但没设宽度，结果它撑满整行，margin: 0 auto 才能生效；或者用了 inline-block 却忘了父容器有换行符导致底部多出空白。
- 给
<a></a>加display: inline-block，再配父容器text-align: center - 或加
display: block+ 明确宽度（如width: 200px或max-width: 100%）+margin: 0 auto - 避免在
<a></a>上写float或position: absolute，否则margin: 0 auto失效
Flex 布局适合需要同时水平+垂直居中的卡片
如果卡片本身有固定高度（比如 Banner 卡片、登录入口卡），且你希望链接文字在卡片内部水平+垂直都居中，display: flex 是最可控的方式。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
性能和兼容性影响：IE10+ 支持，现代项目无压力；比 JS 计算或 hack 方法更稳定。
- 给卡片容器加
display: flex、justify-content: center（水平）、align-items: center（垂直） -
<a></a>保持默认行内行为即可，无需额外设宽高或 display - 若卡片里还有其它元素（如标题、描述），它们会一起参与 flex 对齐，注意是否需用
flex-direction: column调整顺序
别用 align="center" 属性
HTML 中的 align 属性（如 <div align="center">）早已被废弃，W3C 不再推荐，部分浏览器可能警告或不支持。<p>容易踩的坑：在 Vue/React 组件中混用这种属性，可能导致 SSR 渲染警告；在严格模式下（<code>）可能被忽略。
- 一律用 CSS 的
text-align或margin或flex替代 - 不要在
<a></a>标签上写align，它本就不支持该属性 - 检查构建工具（如 ESLint、stylelint）是否已禁用 HTML align 属性提示
真正麻烦的不是“怎么居中”，而是没想清楚“谁该负责居中”：是链接自己？它的父卡片？还是卡片的父容器？选错层级，样式就会像没拧紧的螺丝一样松动。
