html - 如何强制2个div总是叠加？

Question

代码:

<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%;
}

---

问题:

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

我需要 2 个 div 始终保持叠加，并且由于 vh，它们与顶部的距离应该有所不同。

编辑: 添加了 CSS。

Answer 1

最简单的方法是使用 text-align: center :

.homeTitleBack, .homeTitle {
  text-align: center;
}

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

如果上面的方法对你不起作用，一些东西正在改变默认的，那些<div>的正常呈现。秒。所以有 CSS你没有向我们展示。

要确保它们在水平和垂直方向上具有相同的中心，您需要将它们都放在一个容器中。

[center-everything]  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 40vh;
}

[center-everything]>div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* the below are just resets for SO, you shouldn't normally need them */
body { margin: 0;}
* {box-sizing: border-box;}

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