本文介绍如何利用 css 新增的 `inset` 简写属性（替代 `top/right/bottom/left`）精准控制绝对定位元素的位置，实现文本在容器内的水平与垂直居中，并指出其局限性及更优替代方案。
CSS 的 inset 属性是 top、right、bottom 和 left 的简写形式（类似 margin），适用于 position: absolute 或 fixed 元素。虽然 inset: 0 能让元素撑满父容器，但它不会自动居中文本内容——它只是将 <p> 的四边分别设为 0，导致元素左上角贴合父容器左上角，文字仍按默认 text-align: start 渲染。
要真正用 inset 实现居中，需手动计算偏移量。核心思路是：
- 水平居中：依赖 text-align: center（作用于行内内容）；
- 垂直居中：通过 inset 的 top 值将元素纵向居中——即设 top = 50% - 半行高。
由于 <p> 默认无固定高度，我们以字体高度为基准：若 font-size: 20px，行高约等于字体大小（未设置 line-height 时），则需向上偏移 10px，即：
.zone p {
position: absolute;
font-size: 20px;
text-align: center; /* 确保内部文本水平居中 */
inset: calc(50% - 10px) 0 0 0; /* top = 50% - 半字体高度，right/left/bottom 保持 0 */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- calc(50% - 10px) 中的 10px 必须严格对应字体高度的一半，若字体变化或启用 line-height，需同步调整（例如 line-height: 1.4 时，应使用 calc(50% - 0.7em)）；
- box-sizing: border-box 拼写错误已修正（原题中误写为 bordered-box）；
- 此方法耦合性强、可维护性低，不推荐用于生产环境。
✅ 更现代、健壮的替代方案包括：
-
Flexbox（推荐）：
.zone { display: flex; justify-content: center; align-items: center; min-height: 10em; } .zone p { margin: 0; } /* 移除默认外边距 */ -
Grid 布局：
.zone { display: grid; place-items: center; min-height: 10em; } -
Transform 辅助（兼容旧浏览器）：
.zone p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
综上，inset 属性本身并非为居中设计，强行用它实现居中需手动计算、缺乏弹性。在支持 inset 的现代浏览器中（Chrome 89+、Firefox 90+、Safari 14.5+），优先选用 flex 或 grid 方案，语义清晰、响应友好、无需硬编码尺寸。
