バナーの上にテキストを配置する

Question

私はバナーの中央にテキストを配置しようとしていますが、どうやってそれを行うのか分からない問題にぶち当たっています。コードに関する助言やヒントがあれば幸いです。

<div class="container"> 
    <div class="banner"> 
    <div class="content"> 
     <h1 id=encoded-text> 
     <span id="decoded">WE ARE DEDSEC</span> 
     <span id="encoded"></span> 
     </h1> 
    </div> 
    </div> 
</div> 






.banner { 
    font-size: 40px; 
} 

#encoded-text { 
    text-align: center; 
    color: white; 
} 

.content { 
    height: 100vh; 
    background-image: url('/images/gifs/dedsec_loading.gif'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

Answer 1

次のコードで試してみてください。

その後

.content { 
    width: 100%; 
    display: block; 
    position: relative; 
    height: 100vh; 
    background-image: url('/images/gifs/dedsec_loading.gif'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

#encoded-text { 
    width: 100%; 
    display: block; 
    position: absolute; 
    bottom: 10vh; 
    text-align: center; 
    color: white; 
} 

、#encoded-textは10vh余裕で.contentの下部に表示されなければなりません。