2 divsを常に重畳するようにするには？

Question

CODE：

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

---

QUESTION：

常に同じ中心を持つようにhomeTitleとhomeTitleBackを強制する方法は？

私は2つのdivsが常に重ね合わされている必要があり、トップからの距離はvhのおかげで変わるはずです。

EDIT： CSSが追加されました。

Answer 1

最も簡単な方法は、text-align: centerを使用することです：上記はあなたのために動作しない場合は、何かがデフォルト、それら<div>秒の通常のレンダリングを変更している

.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>

。だから、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