Question

我希望我的按钮中心位于主div内。我想我已经错误地写了一些位置元素。你能帮我解决这个问题吗？ Fiddle

<div class='main'>
    <div class='button'>Click me</div>
</div>

.main{
    width:80%;
    height:300px;
    background:#ddd;
    margin:0 auto;
    position:relative;
}

.button{
    padding: 10px 12px;
    background:#999;
    width:90px;
    margin: 50px auto;
    position: absolute;
    color:#fff;
}

Answer 1

首先，删除绝对定位。然后您会注意到顶部/底部边距不起作用。这是因为垂直margins are collapsing：

Box Model 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

当两个或多个边距折叠时，产生的边距宽度是折叠边距的最大值。宽度。在负边距的情况下，负邻接边距的绝对值的最大值从正邻接边距的最大值中减去。如果没有正边距，则相邻边距的绝对值的最大值将从零中扣除。

解决此问题的一种方法是将overflow:hidden添加到父元素.main。这将建立一个new block formatting context。

Updated Example

.main {
    width:80%;
    height:300px;
    background:#ddd;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.button {
    padding: 10px 12px;
    background:#999;
    width:90px;
    margin: 50px auto;
    color:#fff;
}

浮动中心或边距：0自动;一些问题

1 个答案: