我来帮你解决这个布局问题！你遇到的核心问题有两个：伪元素选择器的写法错误，以及块级元素的换行导致垂直对齐失效。咱们一步步来修复：

问题分析 #

1. 伪元素选择器错误：你写的div.st-header-image ::before（带空格）是后代选择器，会匹配div内部所有元素的::before伪元素，而不是给div本身添加伪元素。正确的写法应该是div.st-header-image::before（无空格）。
2. 块级元素换行：p是默认的块级元素，会独占一行，导致你设置的vertical-align: middle完全不起作用，而且容器高度由伪元素的padding-top:40%撑起来后，p会跑到容器外部或被裁剪。

解决方案1：修复原有伪元素方案 #

调整选择器，并将p改为行内块元素，和伪元素在同一行实现垂直居中：

div.st-header-image {
  width: 100%;
  background-color: #a7b885;
  margin: 0;
  text-align: center; /* 水平居中内容 */
}

div.st-header-image p.st-description {
  margin: 0;
  color: red;
  font-size: 40px;
  line-height: 40px;
  display: inline-block; /* 改为行内块，和伪元素同处一行 */
  vertical-align: middle; /* 垂直居中对齐 */
}

div.st-header-image::before { /* 修正选择器，去掉空格 */
  content: "";
  padding-top: 40%; /* 按宽度的40%撑高容器，实现响应式宽高比 */
  display: inline-block;
  vertical-align: middle; /* 和p元素垂直对齐 */
}

对应的HTML保持不变即可，这样p就会完美居中在自适应尺寸的div里了。

解决方案2：用Flex布局更简单（推荐） #

如果你不想用伪元素的方式，Flex布局是更直观的选择，还能避免各种对齐坑：

div.st-header-image {
  width: 100%;
  background-color: #a7b885;
  margin: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  aspect-ratio: 100 / 40; /* 直接设置宽高比，现代浏览器都支持 */
}

div.st-header-image p.st-description {
  margin: 0;
  color: red;
  font-size: 40px;
  line-height: 40px;
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding-top+绝对定位的方案：

div.st-header-image {
  width: 100%;
  background-color: #a7b885;
  margin: 0;
  position: relative;
  padding-top: 40%; /* 按宽度40%撑高 */
}

div.st-header-image p.st-description {
  margin: 0;
  color: red;
  font-size: 40px;
  line-height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 精准居中 */
}

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