css - 使用百分比边距居中 div

Question

我使用百分比边距将一个 div 置于另一个 div 的中心。我这样做是因为父 div 将根据浏览器大小更改大小。

参见 this jsfiddle用于演示。

我的 CSS:

#test-wrap {
    position: absolute;
    width: 400px;
    height: 250px;
    background-color: pink;
}

.white-wrap {
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: white;
    left: 50%; margin-left: -25%;
    top: 50%; margin-top: -25%;
}

这在 Safari 中工作正常，但在 Chrome 中，子 div 显示得比它应该的高。

也许有更好的方法来实现这样的事情，它适用于所有浏览器并且不依赖于像素边距？任何建议将不胜感激!

Answer 1

您应该使用属性边距。所以你的 white-wrap 的 CSS 应该是:

.white-wrap {
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: 50%;
    background-color: white;
}