如何在表格单元格上方放置按钮并实现单元格文本垂直居中

你设置的vertical-align: middle本身是生效的，问题出在按钮的定位方式上：

• 你给按钮用了position: relative配合top: -30px实现上移，但相对定位的元素不会脱离普通文档流——它只是视觉位置向上偏移了30px，原本在单元格里占据的20px高度空间仍然保留在正常布局中。
• 表格单元格计算内容总高度、执行垂直居中时，会把按钮的占位高度也算进去，最终居中的是「按钮占位+下方文本」的整体内容，所以文本看起来会偏下，不符合预期。

把按钮改成绝对定位，让它完全脱离文档流，不再占用单元格内部的布局空间即可，步骤如下：

1. 给放置按钮的td设置position: relative，作为按钮绝对定位的参照基准
2. 把按钮的定位方式改为position: absolute，通过定位属性调整到单元格上方居中的位置，删除原来相对定位相关的偏移、块级居中属性

修改后的完整代码如下：

body {
    margin: 100px;
}
td {
    border: 1px solid black;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    /* 新增：作为内部绝对定位元素的参照 */
    position: relative;
}

table {
    border-collapse: collapse;
    /* 可选：给表格加顶部外边距，避免上浮的按钮遮挡上方内容 */
    margin-top: 20px;
}

#btn {
    position: absolute;
    height: 20px;
    left: 50%;
    top: 0;
    /* 默认实现按钮一半高度压在单元格边框上、水平居中，可根据需求调整 */
    transform: translate(-50%, -50%);
}

<table>
    <tr>
        <td>
            <button id='btn'>test</button>
            <span>Alfreds Futterkiste</span>
        </td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
</table>

修改后单元格计算内容高度时只会统计文本的高度，vertical-align: middle会正常把文本垂直居中，按钮会悬浮在单元格上边框的居中位置，不会干扰内部文本的布局。

如果你希望按钮完全位于单元格外侧、和单元格上边框保持间距，只需要调整按钮的transform值即可，比如transform: translate(-50%, calc(-100% - 6px))就可以实现按钮底部和单元格顶部留6px间隙的效果，不需要写死固定偏移值，适配性更好。

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