如何使用CSS inset属性实现文本在div中水平垂直居中？

你当前的代码已经给<p>设置了position: absolute和inset: 0，但缺少关键的居中配置，以下两种方案都能通过inset属性实现需求：

方案一：利用margin:auto实现容器级居中 #

这种方式会让<p>元素自身在.zone中居中，同时文本在<p>内自然对齐：

.zone p {
  position: absolute;
  inset: 0;
  margin: auto;
  /* 让p标签尺寸适配文本内容，避免占满整个容器 */
  width: fit-content;
  height: fit-content;
}

原理：当绝对定位元素设置了inset: 0（等同于top:0;right:0;bottom:0;left:0），再配合margin: auto时，浏览器会自动分配上下左右的margin，将元素推到容器的中心位置。

方案二：让p标签占满容器，内部文本居中 #

如果希望<p>完全填满.zone，同时文本在<p>内水平垂直居中，可以搭配flex布局：

.zone p {
  position: absolute;
  inset: 0;
  /* 通过flex布局让内部文本居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

原理：inset:0让<p>的尺寸与父容器.zone完全一致，再通过flex布局的两个属性分别实现垂直和水平方向的文本居中。

另外注意你原CSS里的box-sizing: bordered-box是拼写错误，应该改成box-sizing: border-box，避免布局异常。

内容的提问来源于stack exchange，提问作者Marvin Klein