嘿，我来帮你搞定绝对定位文本垂直居中的问题，分通用解法和你的具体场景来拆解～

这里有几种常用且靠谱的方案，覆盖不同场景：

• transform + top 50% 法（最灵活，推荐）
  给绝对定位的元素添加以下样式：

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  

  原理是先把元素顶部对齐容器垂直中点，再通过transform把元素自身往上偏移一半高度——不管元素高度是固定还是动态生成的，都能完美居中。

• 父元素 Flexbox 配合法
  如果父元素是相对定位（position: relative），可以给父元素开启Flex布局，直接让子元素居中：

  .parent {
    position: relative;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 可选，同时水平居中 */
    /* 父元素需要有明确高度，或者靠内部内容撑开高度 */
  }
  .child {
    position: absolute;
    /* 无需额外设置top/left，Flex布局会帮你搞定位置 */
  }
  

• margin: auto 法（适合固定宽高的元素）
  当元素有固定宽高时，可通过设置上下左右为0+自动边距实现居中：

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px; /* 固定宽度 */
  height: 50px; /* 固定高度 */
  

看了你的代码，父元素#object是相对定位，#big是绝对定位，这里给你两种适配现有代码的解决方案：

方案1：快速修改（用transform法） #

直接给#big添加两行CSS即可，不改动其他结构：

#big {
  background-color: green;
  color: black;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%; /* 新增：把元素顶部拉到容器垂直中点 */
  transform: translateY(-50%); /* 新增：把元素自身往上偏移一半高度 */
  z-index: 20;
}

这个方案的好处是不需要知道文本或容器的具体高度，适配性极强。

方案2：父元素Flex布局法 #

如果你想通过父元素布局来控制，也可以这么改：

#object {
  background-color: cornsilk;
  border: #333 3px solid;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  width: 750px;
  display: flex; /* 新增：开启Flex布局 */
  align-items: center; /* 新增：让子元素垂直居中 */
}

#big {
  background-color: green;
  color: black;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  /* 可以去掉原来的display:flex和justify-content:center，父元素的Flex已经能帮你水平居中文本 */
}

两种方案都能实现你要的悬停隐藏+文本垂直居中效果，选哪种全看你个人习惯～

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