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

我想我的按钮中心在主分区内。我想我写了一些位置元素不正确。你能帮我解决这个问题吗

点击我
梅因先生{
宽度：80%；
高度：300px；
背景：ddd；
保证金：0自动；
位置：相对位置；
}
.按钮{
填充：10px 12px；
背景：#999；
宽度：90px；
保证金：50px自动；
位置：绝对位置；
颜色：#fff；
}

首先，移除绝对定位。然后您会注意到上/下页边距不起作用。这是因为垂直方向：

在CSS中，两个或多个框（可能是同级框，也可能不是同级框）的相邻边距可以合并形成一个边距。以这种方式合并的保证金称为崩溃保证金，由此产生的合并保证金称为崩溃保证金

当两个或多个页边距折叠时，生成的页边距宽度是折叠页边距宽度的最大值。对于负边距，从正相邻边距的最大值中减去负相邻边距绝对值的最大值。如果没有正边距，则从零中减去相邻边距绝对值的最大值

解决此问题的一种方法是向父元素

.main

添加

overflow:hidden

。这将建立一个新的体系

---

删除绝对定位。我删除了它是工作正常，但它不是定位边缘从顶部与50px@图赫萨诺夫：在某些情况下，垂直边缘会崩溃。看一看。@难以捉摸的thanx我明白我的错。。

<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;
}

.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;
}