本文介绍如何利用 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 */
}

⚠️ 注意事项：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

立即学习“前端免费学习笔记（深入）”；

• 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 方案，语义清晰、响应友好、无需硬编码尺寸。