div在另一箇中間

我想將<div>放置到另一箇中，並希望居中。我的方法是這樣的：div在另一箇中間

<div id="redthing"> 
<div id="whitebox" > 
</div> 
</div>

名爲.css - 代碼如下：

#redthing { 
margin-top: 2px; 
background-color: #f00d28; 
height: 250px; 
} 

#whitebox { 
margin: 0 auto; 
margin-top: 10px; 
padding-top: 20px; 
height: 10px; 
width: 400px; 
background-color: white; 
border:5px solid #000; 
}

就像你所看到的，空白和邊距不工作，使其中心在頁面的中間（這意味着存在whitebox和頂部和redbox的底部之間的同一個地方。請幫

來源

2012-07-22 user896692

見http://stackoverflow.com/questions/396145/whats-the-best- way-of-centering-a-div-vertical-with-css – 2012-07-22 17:10:00

好吧，讓我們來看看你有什麼。在此圖中的每一行代表HEIG 10px的ht：

┏━━━━━━━━━━━━━━━━━━━━━┓ 
┃10px margin top  ┃ 
┃┌─────────────────────┐┃ 
┃│20px padding top  │┃ 
┃│padding continues │┃ 
┃│10px height   │┃ 
┃└─────────────────────┘┃ 
┃      ┃ 
┊ lots of empty space ┊ 
┃      ┃ 
┗━━━━━━━━━━━━━━━━━━━━━┛

解釋這應該如何工作？

要麼你需要確保你的填充和保證金加起來正確的金額，或使用本：

/* add this to the container */ 
position: relative; 

/* add this to the inner box */ 
position: absolute; 
top: 50%; 
margin-top: -Xpx; 
/* where X is half the offsetHeight of the box - ie. (height+padding+border)/2 */

來源

2012-07-22 17:14:34

你打敗了我！ – cereallarceny 2012-07-22 17:15:32

@Fresheyeball請不要編輯我的答案，如果你只是想打開盒子圖紙。 – 2012-07-22 19:14:35

@Kolink對不起，我認爲線路的損壞是錯誤的。我的錯。 – Fresheyeball 2012-07-22 20:52:50

div在另一箇中間

回答

相關問題