加wrapper容器是为了隔离布局上下文，避免父容器（如flex/grid）干扰table的margin: 0 auto居中；wrapper用div最稳妥，它无语义、无默认样式，能确保table作为块级元素正常触发居中。
table 用 margin: 0 auto 居中时，为什么加 wrapper 容器？
直接给 <table> 加 <code>margin: 0 auto 是最简方案，但前提是它必须是块级上下文中的“可收缩块”，而某些父容器（如 display: flex 或 display: grid）会强制子元素拉伸或忽略 margin。加 wrapper 容器不是为了“多此一举”，而是为了隔离布局上下文、避免意外干扰。
- wrapper 通常设为
display: block（默认），确保内部<table> 的 <code>margin: 0 auto能正常触发 - 若父容器是
flex或grid，直接把<table> 放进去，<code>margin会被忽略——wrapper 就是挡在中间的“绝缘层” - wrapper 还方便统一控制内边距、背景、边框等装饰，不污染表格语义
<div> 是唯一推荐：轻量、中立、无副作用 <li>避免 <code><center></center>：HTML5 已废弃，行为不可靠，且现代 CSS 已完全替代- 不用
<figure></figure>或<aside></aside>：这些有明确语义，会误导屏幕阅读器和 SEO - wrapper：
width: 100%; max-width: 960px; padding: 0 20px;—— 提供响应式最大宽度和左右留白 - table：
width: 100%; max-width: 800px; margin: 0 auto;—— 撑满 wrapper 宽度但不超过上限，再居中 - 务必删掉
table { display: inline-table; }或float，否则margin: 0 auto失效
wrapper 容器该用什么 HTML 元素？div 还是 section？
用 <div> 最稳妥。它无语义、无默认样式、兼容性好，且不会被浏览器或辅助技术误读为内容区块。不要用 <code><section></section> 或 <article></article> 包裹纯布局容器——它们暗示内容结构层级，而 wrapper 只是布局胶水。
wrapper + table 的典型 CSS 组合写法
核心就两行：wrapper 控制宽度与内边距，table 控制自身居中与尺寸。关键不是堆属性，而是理解每条声明的作用边界。
示例：
<div style="width: 100%; max-width: 960px; padding: 0 20px;"> <table style="width: 100%; max-width: 800px; margin: 0 auto;"><tr><td>数据</td></tr></table> </div>
为什么 wrapper 里不能用 text-align: center？
因为 text-align: center 对 <table> 默认无效——表格是块级元素，不是行内内容。除非你同时给 table 加 <code>display: inline-table 或 display: inline-block，但这会引入新问题：宽度计算异常、换行风险、打印样式错乱。
-
text-align: center只对行内/行内块级元素生效，<table> 默认是 <code>display: table，属于块级框 - 强行用
inline-table后，width: 100%会失效，max-width行为也不稳定 - 真正需要的是块级居中逻辑，不是文本对齐逻辑——别混淆
text-align和margin: 0 auto的适用场景
wrapper 的本质是可控的布局锚点：它不参与内容语义，只提供可预测的盒模型环境。最容易被忽略的是 wrapper 的 padding 和 table 的 max-width 之间的关系——如果 wrapper 的 padding 太大，而 table 的 max-width 没同步调小，小屏下就会横向溢出。
