使用 position: sticky 结合 left: 0; right: 0; text-align: center，可使元素在父容器内随滚动保持居中，同时响应页面缩放，完美解决动态表格宽度下的实时对齐问题。
使用 `position: sticky` 结合 `left: 0; right: 0; text-align: center`，可使元素在父容器内随滚动保持居中，同时响应页面缩放，完美解决动态表格宽度下的实时对齐问题。
要实现一个始终水平居中的信息栏（如“No Results Found”），且该栏必须严格位于带横向滚动条的表格下方、不可被滚动遮挡，同时兼容缩放（Ctrl+/−）和滚动（拖动或键盘导航）两种交互场景，传统 relative 或 absolute 定位均存在固有缺陷：relative 受滚动影响偏移，absolute 则脱离文档流、无法响应缩放重排。
✅ 正确解法是采用 position: sticky —— 它兼具流式布局的响应性与粘性定位的稳定性：
-
sticky元素默认按正常文档流渲染（因此缩放时自动重排、保持居中）； - 当其父容器（即
.tableWrapper）发生横向滚动时，它会“粘住”视口边界（由left/right控制），但因设定了left: 0; right: 0，浏览器会自动计算并维持其水平居中位置； - 关键前提是：父容器需设置
position: relative（作为 sticky 的 containing block），且自身具备明确的overflow-x: auto和尺寸约束。
以下是完整、可复用的实现方案：
.tableWrapper {
position: relative; /* 必须！为 sticky 提供定位上下文 */
overflow-x: auto;
width: 400px; /* 支持动态宽度：可用 max-width、vw 或 JS 动态赋值 */
height: 100px;
outline: 1px solid #007bff; /* 调试用 */
}
table {
border: 1px solid #333;
font-size: 18px;
min-width: 1200px; /* 模拟宽表，触发横向滚动 */
}
.infoDiv {
position: sticky;
left: 0;
right: 0;
text-align: center;
padding: 8px 0;
background: #f8f9fa;
color: #6c757d;
font-weight: 500;
outline: 1px dashed #dc3545; /* 调试用 */
/* 可选：防止文字换行破坏居中 */
white-space: nowrap;
}
<div class="tableWrapper">
<table>
<thead><tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr></thead>
<tbody><tr><td colspan="10"> </td></tr></tbody>
</table>
<div class="infoDiv">No Results Found</div>
</div>
⚠️ 注意事项：
-
浏览器兼容性：
sticky在现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+、Edge 16+）中已全面支持；若需兼容旧版 IE，需降级为 JavaScript 监听scroll+resize事件动态计算left值。 -
父容器限制：
.tableWrapper必须有明确的width或max-width，否则sticky的居中逻辑可能失效；若表格宽度动态变化，建议用min-width或 CSS 自适应布局（如display: grid配合fr单位）替代固定像素值。 -
层级与遮挡：确保
.infoDiv的z-index足够高（默认为auto，通常无需额外设置），避免被其他元素覆盖。 -
无障碍增强：为
.infoDiv添加role="status"和aria-live="polite"，便于屏幕阅读器感知状态变更。
总结：position: sticky 是解决“滚动+缩放双重居中”需求的原生、高效、语义清晰的 CSS 方案。它无需 JavaScript 干预，天然适配响应式设计，且在各种表格宽度下均能稳定工作——只需牢记 position: relative 父容器 + left: 0; right: 0 + text-align: center 这一黄金组合。
