I'm working on a design where I have a large div taking up the width and some of the height, with a smaller circle that needs to be positioned half at the bottom/center of this div and half right after it. Everything seems to work fine until I increase the height or try to zoom in, at which point the circle starts moving vertically and loses its 50/50 positioning. Additionally, when zooming the page, the circle expands from the top rather than the middle.
<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;
}