div在另一個中間

Question

我想將<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與redbox的頂部和底部之間的位置redbox 。請幫助

Answer 1

好吧，讓我們看一下你所擁有的。 該圖形中的每一行代表10px的高度：

┏━━━━━━━━━━━━━━━━━━━━━┓
┃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 */