如何在容器:before伪元素的绿色高亮矩形动画中垂直居中H1文本

我来帮你搞定这个垂直居中的问题，先梳理下现有代码里的几个核心问题，再给出修正后的完整方案：

问题分析 #

• 容器未设置相对定位：你的.h1-text-container没有添加position: relative，导致伪元素的position: absolute是相对于视口（而非容器）定位，绿色矩形和H1的布局会脱节。
• 垂直居中方式不够可靠：虽然用了top: 50% + transform: translateY(-50%)，但因为容器没有相对定位，H1的相对定位参考系不正确；而且这种方式在布局变化时不如flex布局灵活。
• 拼写错误：animation-play-state: runnning里的runnning是拼写错误，应该是running。

修正后的代码 #

CSS部分 #

.h1-text-container {
  text-align: center;
  height: 100px;
  /* 添加相对定位，让伪元素和H1的定位都基于容器 */
  position: relative;
  /* 使用flex布局一键实现H1的水平垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.h1-text-container h1 {
  color: #000;
  /* 移除原来的定位方式，交给flex布局处理 */
  position: relative;
  z-index: 1; /* 确保文本在绿色矩形上方 */
}

.h1-text-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 1s ease-in-out;
  pointer-events: none;
  z-index: -1;
  background-color: #8ac54d;
  animation-name: greenrectangleinout;
  animation-duration: 2000ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  transform-origin: 100% 0;
  /* 修正拼写错误 */
  animation-play-state: running;
  /* 移除手动设置的height，让伪元素自动填满容器 */
}

@keyframes greenrectangleinout {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); } /* scale属性取值为数值，1代表100%缩放 */
}

HTML部分 #

<div class="h1-text-container">
 <h1>H1 TEXT</h1>
</div>

关键修改说明 #

• 相对定位容器：给.h1-text-container添加position: relative，确保伪元素和H1的定位都以容器为参考，避免布局偏移。
• Flex布局居中：用display: flex; align-items: center; justify-content: center;可以快速实现H1的水平+垂直居中，代码更简洁，适配性更强。
• 修正动画细节：把transform: scaleX(100%)改成transform: scaleX(1)（scale属性的取值是数值，1代表100%缩放），同时修正了animation-play-state的拼写错误。
• 层级控制：给H1添加z-index:1，确保文本始终显示在绿色矩形上方（虽然伪元素已经设了z-index:-1，但加上更保险）。

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