When positioning the confirmBox on a page with lots of content using absolute inside relative positioning, I encountered an issue where the confirmBox was centered in the page but not in the center of the screen. Since the confirmBox can be opened through various links on the webpage, it is necessary to position it in the center of the screen rather than the page. How can this be achieved?
CSS
#confirmBox {
background:#fff;
border:1px solid #80686f;
border-radius:5px;
-webkit-box-shadow: 0 8px 6px -6px #766A65;
-moz-box-shadow:0 8px 6px -6px #766A65;
box-shadow: 0 8px 6px -6px #766A65;
font-size:15px;
height:217px;
position:absolute;
text-align:center;
z-index:109;
width:400px;
top:50%;
left:50%;
margin-top:-108px;
margin-left:-200px;
}
HTML
<div style="position:relative">
<div id="confirmBox">
</div>
</div>