html表格水平居中需设margin: 0 auto并配合显式宽度（如width: 80%或max-width），因table是块级元素，text-align: center对其无效，且避免浮动、绝对定位等干扰。
HTML表格默认左对齐，要让它在页面中水平居中，核心是控制 <table> 元素自身的块级行为和外边距，而不是给内容加 <code>align="center"（已废弃）或瞎套 text-align: center 在父容器上（那只会居中文本，不居中表格本身）。
用 margin: auto 让 <table> 自身居中
<p>这是最直接、最可靠的方式。前提是 <code><table> 必须是块级元素（它默认就是），且没有设置固定宽度时会“撑满父容器”，此时 <code>margin: auto 无效——所以必须显式设一个 width 值。
实操建议：
- 给
<table> 添加内联样式：<code>style="margin: 0 auto; width: 80%;"（宽度建议用百分比或具体像素，避免 100%） - 或者写 CSS 类：
.center-table { margin: 0 auto; width: 600px; }，再在<table class="center-table"> 中使用 <li>别只写 <code>margin: auto—— 如果表格上方有其他元素，margin: auto会让上下都居中，可能造成意外空隙；明确写margin: 0 auto更稳妥 - 父容器加了
text-align: center，但表格依然靠左 - 表格里的文字居中了（那是
text-align起效了），但整个表格框没动 - 误以为加了
align="center"属性还能工作（HTML5 已移除该属性，浏览器可能兼容但不推荐） - 改用
max-width限制最大宽度，再配margin: 0 auto：table { max-width: 1200px; width: 100%; margin: 0 auto; } - 避免在小屏上让表格过宽导致横向滚动，可配合
overflow-x: auto包裹容器 - 移动端慎用固定像素宽，优先考虑
max-width+ 百分比组合
为什么 text-align: center 放在 <div> 上不管用
<p>因为 <code>text-align 控制的是**行内内容的对齐方式**，而 <table> 是块级元素，它不会被父元素的 <code>text-align “推动”居中，只是像普通段落一样占据整行。
常见错误现象：
响应式场景下居中的注意事项
如果表格宽度随屏幕变化（比如用 width: 100%），margin: 0 auto 就失效了——因为此时表格宽度等于父容器宽度，左右 margin 都为 0。
应对策略：
真正容易被忽略的是：居中生效的前提是表格不能是浮动元素（float）、不能是绝对定位（position: absolute）、也不能被 Flex/Grid 父容器的对齐规则覆盖——这些都会让 margin: 0 auto 失效。检查计算后的 display 和 position 值，比反复调 text-align 有用得多。
