如何用HTML/CSS实现CTA按钮水平垂直居中且紧贴文本？

直接替换成以下代码，就能实现CTA按钮水平/垂直居中、紧贴文本且不撑满页面的效果：

<div style="text-align:center;">
  <a href="https://hyperlink" style="background-color:#FA8D29;padding:12px 24px;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:20px;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:100%;">
    <span style="mso-text-raise:15pt;vertical-align:middle;"></span>CTA Text
  </a>
</div>

关键修改说明： #

• 给父级div添加text-align:center：这是邮件客户端兼容度最高的按钮水平居中方式
• 删除原代码里的width:1000%和max-width:100%：彻底解决按钮撑满页面的问题，让按钮宽度由文本+内边距自动适配
• 将padding:12px改为padding:12px 24px：给按钮左右添加合适内边距，既保证文本和按钮边缘有合理间距，又不会让按钮过度宽于文本
• 清理重复的line-height设置：统一保留line-height:22px，确保按钮内文本垂直居中
• 保留空span的mso-text-raise属性：兼容Outlook客户端的垂直对齐问题，避免文本偏移

内容的提问来源于stack exchange，提问作者Jen Rapp