inset-0 不能直接居中，因其仅将元素四边设为0使其拉伸占满父容器，无居中逻辑；需配合 m-auto（且父relative、子有宽高、父有明确高度）或 top-1/2 left-1/2 + -translate-x-1/2 -translate-y-1/2 才能可靠居中。
absolute + inset-0 为什么不能直接居中？
因为 inset-0 只是把 top、right、bottom、left 全设为 0，让元素“拉伸占满父容器”，但它本身不带任何居中逻辑。浏览器不会自动把内容推到中间——它只是撑开，结果往往是子元素左上角顶在父容器左上角，内容偏移。
inset-0 + m-auto 居中失败的三个硬性条件
这个组合看似简洁，但必须同时满足以下三点，否则垂直方向一定不居中：
- 父容器必须有
relative（否则inset-0会相对于视口定位） - 子元素必须有明确的
width和height（比如w-48 h-32或w-fit h-fit），否则m-auto在垂直方向退化为margin: 0 - 父容器自身得有可测量的高度（如
h-screen、min-h-64），否则inset-0撑不开空间
更可靠的替代写法：top-1/2 left-1/2 + -translate-x-1/2 -translate-y-1/2
这套组合不依赖子元素宽高，也不需要提前知道尺寸，是目前最稳的绝对居中方案：
- 先用
top-1/2 left-1/2把元素左上角移到父容器中心点 - 再用
-translate-x-1/2 -translate-y-1/2向左、向上各偏移自身宽高的一半（负号不能漏） - 务必确认父容器有
relative，否则元素会飞到视口中心 - 如果用于模态框或遮罩层，建议改用
fixed而非absolute，避免父容器 transform 或 overflow 影响定位
fixed 定位下 inset-0 的真实作用
fixed inset-0 不是为了居中，而是为了“全屏覆盖且不随滚动偏移”。它等价于 position: fixed; top: 0; right: 0; bottom: 0; left: 0，适用于遮罩层、全局提示这类场景。想在此基础上居中内容，仍需在内部嵌套一层 absolute 或用 flex 容器，比如：
<div class="fixed inset-0 z-50 bg-black/50">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white w-96 h-64 rounded-lg"></div>
</div>
</div>
真正容易被忽略的是：当父容器高度由内容撑开时，inset-0 会失效；而 translate 方案对父容器高度无强依赖，容错率更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
