Html 如何强制2个div始终重叠？

代码：

问题:

如何强制homeTitle和homeTitleBack始终具有相同的中心

我需要两个div始终保持重叠，它们与顶部的距离应该因vh而异

---

编辑：添加CSS。

最简单的方法是使用文本对齐：居中：

.homeTitleBack、.homeTitle{ 文本对齐：居中； } 标题 测验 测验 测验

---

始终保持同一个中心，你的意思是它们应该垂直和水平居中？现在发生了什么而不是你想要的？是什么导致它们不能重叠？我想你可以让他们两个都处于绝对的位置；你试过了吗？@AndreiGheorghiu当然。让我添加当前的css。有一个误解。看看第二部分是否涵盖了您的需求。您可以设置最小高度：100vh；这个容器更适合你的用例。这个更新要好得多：D，但是你似乎强迫两个div都集中在屏幕中间？我希望他们的中心是相同的，他们的高度是在vh设置，就像我现在做的。是的，你需要一个最小的高度对家长，如果你想垂直中心。如果不这样做，您将垂直居中，但子对象居中将位于父对象上方。发生的事情是，他们走到页面开始的上方，创建一个可展开的空间。如果你需要更多的细节，我可以提供一个例子。您要做的是将[center everything]的“min height”或“height”属性设置为便于您使用的值。@Coder1000我根据您添加到问题中的内容更新了第二个解决方案。从.hometTitleBack中删除上页边距，并使用“我的代码”设置。另一方面，向800px之类的元素添加硬编码宽度会破坏响应能力。你真的应该把它包装在@media查询中。

<div class = "homeTitleBack">TITLE</div>
<div class="homeTitle">
    <span class="WORD">TEST</span>
    <span class="WORD">TEST</span>
    <span class="WORD">TEST</span>
</div>

.homeTitle {
  z-index: 14;
  position: relative;
  text-align: center;
  color: #252B37;
  background-color: black;
  color: white;
  font-size: 50px;
  margin-top: 20vh;
  width: 550px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.homeTitleBack {
  position: relative;
  content: "";
  top: 25vh;
  z-index: -1;
  height: 20px;
  width: 800px;
  margin: auto;
  transform: scale(0.75);
  -webkit-filter: blur(5vw);
  -moz-filter: blur(5vw);
  -ms-filter: blur(5vw);
  filter: blur(5vw);
  background-size: 200% 200%;
}