如何让内部元素横向溢出外部容器且保持居中显示？

问题描述 #

当前表格在内容过长时，会因父容器<main>的宽度限制导致单元格文本换行，显示效果不佳。需要实现：表格宽度随内容自适应，当所需空间超过<main>宽度时，向<main>左右边框外双向溢出，同时表格整体保持屏幕居中。

修改后的CSS代码 #

body {
  margin: 0;
}

main {
  width: 50%;
  min-width: 600px;
  margin: auto;
  border: 1px solid red; /* 调试用边框 */
  overflow-x: visible; /* 允许子元素向水平方向溢出容器 */
}

.wide-table {
  display: table; /* 恢复表格默认布局，保证单元格正常排列 */
  width: auto; /* 让表格宽度自适应内容 */
  margin: 0 auto; /* 表格宽度小于main时，保持容器内居中 */
  /* 核心：通过位移实现屏幕居中，超出main时双向溢出 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  border: 1px solid blue; /* 调试用边框 */
}

/* 可选：防止单元格文本强制换行，保持内容完整性 */
.wide-table td, .wide-table th {
  white-space: nowrap;
}

关键属性说明 #

• display: table：恢复表格的原生布局特性，避免block布局导致的单元格异常换行。
• position: relative + left: 50% + transform: translateX(-50%)：这是实现屏幕居中的核心逻辑，无论表格宽度是否超过<main>，都会以屏幕中线为基准居中，自然实现双向溢出效果。
• overflow-x: visible：确保<main>允许子元素向水平方向溢出，不会裁剪表格内容。
• white-space: nowrap（可选）：强制单元格内文本不换行，完全展示长内容，若需要换行可移除该属性。

效果说明 #

修改后，当表格内容较短时，会在<main>内居中显示；当内容过长导致表格宽度超过<main>时，表格会向<main>的左右两侧同时溢出，且整体保持屏幕居中，符合预期效果。

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