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与{{1}的顶部和底部之间存在相同的位置}}。请帮忙

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 */

div在另一个中间

1 个答案: