仅text-align: center无法实现表格内元素垂直居中，因vertical-align需配合padding或flex布局才稳定；含图标/按钮时推荐display: flex+align-items:center。
table里标签水平垂直居中为什么只写text-align: center不行
因为是行内元素，默认占据内容宽度，text-align: center确实能让它在
vertical-align: middle到td上就完事了，结果发现链接还是“贴着上边”或“上下晃动”。根本原因是：vertical-align只对td自身生效，而的基线（baseline）受line-height、padding、父级font-size共同影响，单靠vertical-align常被抵消。
给设vertical-align: middle + padding才稳定
这是最轻量、兼容性最好（IE8+）的方案，适用于纯文本链接或带简单图标的小按钮：
-
td必须显式设vertical-align: middle（写在tr或table上无效）
- 配合
padding提供视觉缓冲，避免文字紧贴边框导致“看起来没居中”
- 如果
td高度由内容撑开，建议加min-height确保有足够空间
- 避免
line-height和font-size差异过大——比如父td设font-size: 14px，但a里嵌了span用了16px，就会拉偏基线
示例：
td.link-cell {
text-align: center;
vertical-align: middle;
padding: 8px 12px;
min-height: 40px;
}
然后在HTML中用：<td class="link-cell"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">编辑</a></td>
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
立即学习“前端免费学习笔记（深入）”；
含按钮/图标/多行链接时，用flex布局更可靠
一旦td里出现<button></button>、<i class="icon"></i>、或者换行的<span>详情<br>下载</span>，vertical-align基本失效。这时直接把td变成Flex容器：
- 加
display: flex后，vertical-align自动被忽略，不用再纠结它的作用域
-
align-items: center管垂直，justify-content: center管水平，逻辑清晰
- 注意：Flex会让
td失去原生表格的等宽行为，如果列宽依赖table-layout: auto，需额外加width或min-width
- IE11支持
display: flex，但不支持place-items，所以别用后者替代
示例：
td.flex-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
容易忽略的两个细节
一是border-collapse: collapse下，如果th和td没统一设border，视觉上会感觉链接“偏左”或“偏高”，因为边框粗细不一致干扰了对齐基准；二是某些UI框架（如Bootstrap）会给a加display: inline-block并设vertical-align: baseline，这会覆盖你写的middle——得用!important或提高选择器权重来覆盖。
这是最轻量、兼容性最好（IE8+）的方案，适用于纯文本链接或带简单图标的小按钮：
-
td必须显式设vertical-align: middle（写在tr或table上无效） - 配合
padding提供视觉缓冲，避免文字紧贴边框导致“看起来没居中” - 如果
td高度由内容撑开，建议加min-height确保有足够空间 - 避免
line-height和font-size差异过大——比如父td设font-size: 14px，但a里嵌了span用了16px，就会拉偏基线
示例：
td.link-cell {
text-align: center;
vertical-align: middle;
padding: 8px 12px;
min-height: 40px;
}
然后在HTML中用：<td class="link-cell"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">编辑</a></td>
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
含按钮/图标/多行链接时，用flex布局更可靠
一旦td里出现<button></button>、<i class="icon"></i>、或者换行的<span>详情<br>下载</span>，vertical-align基本失效。这时直接把td变成Flex容器：
- 加
display: flex后，vertical-align自动被忽略，不用再纠结它的作用域 -
align-items: center管垂直，justify-content: center管水平，逻辑清晰 - 注意：Flex会让
td失去原生表格的等宽行为，如果列宽依赖table-layout: auto，需额外加width或min-width - IE11支持
display: flex，但不支持place-items，所以别用后者替代
示例：
td.flex-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
容易忽略的两个细节
一是border-collapse: collapse下，如果th和td没统一设border，视觉上会感觉链接“偏左”或“偏高”，因为边框粗细不一致干扰了对齐基准；二是某些UI框架（如Bootstrap）会给a加display: inline-block并设vertical-align: baseline，这会覆盖你写的middle——得用!important或提高选择器权重来覆盖。
