把一個標題放在CSS/HTML中的一個框的頂部

Question

我想把我的「爲什麼你應該從我們這裏購買」放在大型灰色容器的頂部，但不知道如何將文本居中放置在容器所有向下移動防止文本重疊，有沒有人知道這個問題的解決辦法？

#whybuy { 
 
    color: #ffcc00; 
 
    font-size: 40px; 
 
    margin: 0 auto; 
 
    margin-top: 200px; 
 
    text-align: center; 
 
} 
 

 
#largebox { 
 
    width: 1890px; 
 
    height: 475px; 
 
    background-color: #2c2c2c; 
 
    padding-top: 100px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    margin: 0 auto; 
 
    margin-top: 200px; 
 
} 
 

 
#box1 { 
 
    height: 450px; 
 
    width: 300px; 
 
    background-color: #232323; 
 
    float: left; 
 
    margin-left: 425px; 
 
} 
 

 
#box2 { 
 
    height: 450px; 
 
    width: 300px; 
 
    background-color: #232323; 
 
    float: left; 
 
    margin-left: 325px; 
 
} 
 

 
#box3 { 
 
    height: 450px; 
 
    width: 300px; 
 
    background-color: #232323; 
 
    float: left; 
 
    margin-left: 325px; 
 
}

<h1 id="whybuy">WHY BUY FROM US</h1> 
 
<div id="largebox"> 
 
    <div id="box1"> 
 
    <div id="box2"> 
 
     <div id="box3"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這將提上largebox文本。

#whybuy { 
color: #ffcc00; 
font-size: 40px; 
position: absolute; 
width: 100% 
text-align: center; 
z-index: 1; 

#largebox { 
    width: 1890px; 
    height: 475px; 
    background-color: #2c2c2c; 
    padding-top: 100px; 
    padding-left: 20px; 
    padding-right: 20px; 
    margin: 0 auto; 
    display: relative 
} 

#box1 { 
    height: 450px; 
    width: 300px; 
    background-color: #232323; 
    float: left; 
    margin-left: 425px; 
} 

#box2 { 
    height: 450px; 
    width: 300px; 
    background-color: #232323; 
    float: left; 
    margin-left: 325px; 
} 

#box3 { 
    height: 450px; 
    width: 300px; 
    background-color: #232323; 
    float: left; 
    margin-left: 325px; 
} 

Answer 2

檢查#largebox的邊距;它有margin-top：200px;

#largebox { 
width: 1890px; 
height: 475px; 
background-color: #2c2c2c; 
padding-top: 100px; 
padding-left: 20px; 
padding-right: 20px; 
margin: 0 auto; 
//margin-top: 200px; 
}