表格必须设为块级元素（display: block）并指定明确宽度，才能用margin: 0 auto实现水平居中；默认display: table不满足条件，易导致居中失效。

表格必须是块级元素才能用 margin: auto

HTML 的 <table> 默认是“表格显示模式”（<code>display: table），不是块级元素，所以直接写 margin: 0 auto 在部分旧浏览器或某些 CSS 上下文中可能无效。必须显式设为 display: block，否则居中不生效。

常见错误现象：表格看起来没动、靠左贴边、或者只在 Firefox 里有效但在 Chrome/Safari 失效——大概率就是没加 display: block。

• 正确写法：table { display: block; width: 80%; margin: 0 auto; }
• 如果表格嵌套在 <div> 里，也可以只给这个 <code><div> 设 <code>text-align: center，再让 <table> 保持默认 <code>display: table（但这是靠父容器内联对齐，非真正 margin 居中）
• 注意：设了 display: block 后，<table> 会失去原生表格的宽度自适应行为，必须手动指定 <code>width（如 width: 90% 或 width: 600px）

  margin 值写错顺序会导致上下/左右错位

  用四值简写时，margin: 10px 20px 30px 40px 严格按「上 右 下 左」顺序，不是「上 左 下 右」。很多人凭直觉写成 margin: 10px 40px 30px 20px，结果左边距变成 20px，右边距反而是 40px。

  更易出错的是三值写法：margin: 10px 20px 30px 表示「上 20px 左右 30px 下」，不是「上 左 下」——中间那个值永远管左右。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • 想单独调右间距？用 margin-right: 15px，别依赖简写猜顺序
  • 要微调表格离顶部距离，优先用 margin-top，而不是改整个 margin 简写
  • 移动端慎用固定像素值（如 margin: 20px），建议搭配 rem 或百分比（margin: 1.5rem 0）

  表格单元格（<td>/<code><th>）不能设 <code>margin

  这是硬限制：<td>、<code><th>、<code><tr> 这些表格内部元素，无论怎么写 <code>margin 都不会生效。浏览器会忽略它们的 margin 声明。

  如果你发现给 <td> 加了 <code>margin: 10px 却没反应，不是代码写错，是规范不允许。想控制单元格内边距，只能用 padding；想控制列间距，得用 border-spacing（配合 border-collapse: separate）。

  • 有效：td { padding: 8px 12px; }
  • 无效：td { margin: 5px; }（被浏览器静默丢弃）
  • 想让整列变宽？用 table { border-spacing: 0; } + td { padding-left: 20px; }，别碰 margin

  垂直居中不能只靠 margin: auto

  margin: 0 auto 只能水平居中，对垂直方向无效。表格本身没有高度约束时，margin-top: auto 或 margin: auto 在垂直方向不起作用。

  真要垂直居中表格，有三个现实可用方案：

  • 父容器设 display: flex; justify-content: center; align-items: center;（最稳，推荐）
  • 表格加 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);（需父容器 position: relative）
  • 用 display: grid; place-items: center;（现代浏览器支持好，但 IE 不支持）

  别试 margin: auto auto 或 margin: auto 单独一行——它不会垂直居中，只会让浏览器按默认规则处理（通常是顶部对齐）。