• position: absolute 的定位基准是什么？如果一直往上找都找不到一个非 static 的祖先，它最终会相对谁定位？

  • 浏览器视口，文档流起点，左上角。

• z-index 属性在哪些 position 值下才会生效？为什么？

  • 除了默认的都生效，因为默认的不会创建层叠上下文。

• 你刚才提到的 transform 居中方案，translate(-50%, -50%) 里的百分比是相对于谁计算的？这和 top: 50% 的百分比有什么本质不同？

  • translate(-50%, -50%) 自身 宽度的50%， top是父文档的50%

• 如果我必须兼容一个非常古老的浏览器（比如 IE9），它不支持 Flexbox, Grid 和 transform，你有什么办法可以实现宽高不定的元素居中吗？（提示：可以考察 display: table-cell 等旧技术）

<div class="parent">
  <div class="child">
    <p>我是宽高不定的内容...</p>
    <p>内容可以有很多行。</p>
  </div>
</div>

.parent {
  display: table;
  width: 100%; /* 或者一个具体宽度 */
  height: 100vh; /* 需要一个高度 */
}

.child {
  display: table-cell;
  vertical-align: middle; /* 核心：实现垂直居中 */
  text-align: center;     /* 实现内部 inline/inline-block 元素的水平居中 */
}

.child p {
  /* 如果内容需要左对齐，可以在内层元素上覆盖 text-align */
  text-align: left;
  /* 为了让 p 元素本身在 child 中居中，需要让它变成 inline-block */
  display: inline-block;
}