Question

HTML：

    <div class="outside">
         <div class="inside">
         </div>
    </div>

我有两个CSS：＃1和＃2

 /*CSS#1 does not work*/
.outside{
    background: blue;
    width: 400px;
    height: 400px;
}
.inside{
    background: red;
    width: 200px;
    height: 200px;
    position: relative;
    top: 50%;
    margin: 0 auto;
    margin-top: -100px; /*half height of this div*/
}

/*CSS#2 works well */
.outside{
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.inside{
    background: red;
    width: 200px;
    height: 200px;
    position: relative;
    top: 50%;
    margin: 0 auto;
    margin-top: -100px; /*half height of this div*/
}

我的目标是将'inside'div放在'outside'div的中心（垂直和水平）。我有很多方法可以实现这个目标，但是在这个过程中我发现了一些奇怪的东西。

我发现CSS＃2工作得很好，但CSS＃1不起作用：当设置'inside' div'margin-top：-100px'时，'outside'也会向上移动..

以下是 demo

所以我想知道为什么'border'在这里很好用，为什么'背景'不起作用？

Answer 1

您需要将overflow: auto;添加到其中的父元素，但是您的方法不正确，您需要将position子元素absolute添加到父元素而不是{{1} }}

Demo

使用relative或overflow: auto;将解决您的问题，因为它会阻止border父margin。{/ p>

Answer 2

试试这个。您需要将顶部和左侧设置为25％。我在ie 11和crome上进行了测试。它工作正常。

.outside{
    background: blue;
    width: 400px;
    height: 400px;
}
.inside{
    background: red;
    width: 200px;
    height: 200px;
    position: relative;
    top: 25%;
    left:25%;

}

为div添加边框时出现奇怪的位置问题

2 个答案: