我有一个 div 填充了所有的宽度和一定的高度,然后我有一个较小的圆圈,它需要在这个 div 的底部/中心的一半,在它之后的一半。
一切正常,直到我获得更高的高度或尝试缩放它,然后圆圈将垂直移动,不再是 50/50。此外,缩放页面将使圆圈从顶部扩展,而不是从中间扩展。
<div id="rectangle">
<img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
CSS:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#rectangle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
background: #E5E5E5;
}
#circle {
position: absolute;
top: 86%;
left: 0;
right: 0;
width: 100px;
margin-right: auto;
margin-left: auto;
}