双向居中需根据场景选择方案：Flex需justify-content和align-items同时设且父容器有明确高度；表格需tr固定高度配合vertical-align；绝对定位会脱离文档流；Grid的place-items最简但兼容性有限。
flex布局中justify-content和align-items必须同时设
只写justify-content: center只能水平居中，只写align-items: center只管垂直方向——双向居中必须两个都上。父容器还得有明确高度（比如height: 300px或min-height: 100vh），否则align-items: center在无高度的流式容器里没效果。
常见错误是给子元素加margin: auto指望它自动撑开垂直空间，但margin: auto对垂直方向在块级流中基本无效（除非父容器是display: flex或display: grid）。
表格单元格里vertical-align: middle要配tr固定高度
在<table>里用<code>vertical-align: middle做垂直居中，必须配合tr { height: 40px }这类固定高度设置。用min-height在老版 Chrome 里可能不触发计算，导致文字悬顶。
如果<td>里塞了<code><div>或按钮等块级子元素，<code>vertical-align只作用于该<td>的行内盒模型，对子元素内部布局没影响。此时要么让子元素也设<code>display: inline-block; vertical-align: middle，要么改用display: flex——但后者会破坏表格语义，打印或屏幕阅读器可能出问题。
立即学习“前端免费学习笔记（深入）”；
绝对定位+transform(-50%, -50%)要防脱离文档流
用position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)确实能精准双向居中，但子元素会脱离文档流：它不再占位，可能盖住下方内容，也不响应父容器的overflow: hidden裁剪。
需要确保父容器已设position: relative，否则left/top会相对于视口定位；另外，如果父容器高度动态变化（比如随内容伸缩），这个方案不会自适应——它只认当前渲染时的坐标，不重算。
Grid的place-items: center最简但兼容性需确认
display: grid; place-items: center一行代码搞定双向居中，且天然支持子元素多行、换行、甚至网格内嵌套，比 Flex 更“二维友好”。但它在 IE 完全不支持，iOS Safari 10.3 以下也不行。
如果项目要兼容 IE11，得降级到display: flex；如果只跑现代环境（Chrome/Firefox/Safari 12+），place-items是最少出错的选择——不用操心justify-content和align-items谁先谁后，也不用记align-content和align-items的区别。
真正容易被忽略的是：当父容器本身是display: inline-block或没有显式宽高时，place-items: center可能表现异常——它依赖父容器形成一个明确的网格轨道容器，宽度高度最好直接设或由内容撑开。
