我使用百分比边距将一个 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
显示得比它应该的高。
也许有更好的方法来实现这样的事情,它适用于所有浏览器并且不依赖于像素边距?任何建议将不胜感激!
最佳答案
您应该使用属性边距。所以你的 white-wrap 的 CSS 应该是:
.white-wrap {
position: relative;
margin: 0 auto;
width: 50%;
height: 50%;
background-color: white;
}
关于css - 使用百分比边距居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17741514/