table整体居中必须设width才生效，直接写<table style="margin: 0 auto;">不会居中；需同时指定width（如width: 800px或width: 90%），否则浏览器按内容撑开、无剩余空间分配margin。
table 整体居中必须设 width 才生效
直接写 <table style="margin: 0 auto;"> 不会居中，除非你同时明确指定 width（比如 width: 800px 或 width: 90%）。因为 margin: 0 auto 对块级元素生效的前提是它有确定的宽度——否则浏览器按内容自动撑开，左右 margin 都是 0。
常见错误：
- 只写
margin: 0 auto，没设width，表格紧贴左边界 - 用废弃的
<table align="center">，W3C 验证失败，Chrome 和 Firefox 渲染不一致 - 在
display: flex容器里嵌套<table>后再加align="center"，完全失效
推荐做法：
-
<div style="display: flex; justify-content: center;"><table>...</table></div>—— 无需 width，IE11+ 兼容 -
<div style="text-align: center;"><table style="display: inline-table;">...</table></div>—— 适合窄屏，但需注意inline-table的换行行为
td/th 内容对齐只认 text-align，不是 align 属性
align="right" 写在 <td> 或 <th> 标签上，虽然部分浏览器还能显示右对齐，但它已是 HTML5 废弃属性。真正起效且可维护的是 CSS 的 text-align。
立即学习“前端免费学习笔记（深入）”；
为什么不能混用：
-
align="center"和style="text-align: right"同时存在时，Firefox 可能忽略后者，Chrome 可能覆盖前者，调试时难以复现 -
align属性不支持响应式控制（比如“小屏左对齐、大屏右对齐”） -
colgroup中的<col>只支持有限样式，align在这里根本无效
实用写法：
- 整表统一：
td, th { text-align: left; } - 按列设置：
td:nth-child(3), th:nth-child(3) { text-align: right; }（适合金额列） - 按语义加类：
<td class="price">¥299.00</td>+.price { text-align: right; font-family: monospace; }
vertical-align 不作用于 table，只对 td/th 内部内容有效
vertical-align: middle 加在 <table> 标签上毫无效果。它只影响 <td> 或 <th> 内部内容的垂直对齐，而且前提是单元格本身有高度支撑（比如设置了 height、line-height，或内容足够多）。
典型误区：
- 写
<table valign="middle">——valign是废弃属性，且table标签根本不认这个属性 - 写
valign="center"—— 值必须是top、middle、bottom或baseline，center会被忽略 - 给
td设了vertical-align: middle，但单元格高度由内容撑开、无固定高，结果还是顶部对齐
可靠做法：
- 确保
td有明确高度：td { height: 40px; line-height: 40px; vertical-align: middle; } - 或用 flex 模拟：
td { display: flex; align-items: center; }（更可控，但 IE10- 不支持） - 避免依赖
valign属性，全量迁移到 CSS
form 表单项对齐本质是基线问题，不是 margin 调整
<label> 和 <input type="text"> 看起来不对齐，不是因为它们“位置错了”，而是默认 vertical-align: baseline 下，文字基线和输入框基线不重合。强行加 margin-top 或 padding 只会让响应式和跨浏览器更糟。
关键动作：
- 给所有表单控件统一设
vertical-align: middle：包括input、select、textarea、button - 包裹每组
label + input用display: flex：父容器设align-items: center，比全局调line-height更稳定 - iOS Safari 上
label点击区域可能偏小，建议加display: block或显式设min-height
特别注意：button 和 input[type="search"] 并排时底部不齐，往往是因为 button 默认有 border 和额外 line-height，应重置： button { border: none; line-height: normal; }
