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

如何强制2个div总是重叠？

1 个答案: