Question

I am trying to align the modal box ( in this case it’s a confirm box ) in the center of the page. So I set the position of the main container to be relative and then positioned the div element of the modal box using the following CSS code:

.confirmBox{
    top:25%;
    left:25%;
}

I have adjusted the values of the top and left attributes. This works fine at lower zoom but as I zoom in the box does not remain in the center of the page. How can I solve this using CSS?

The original code is actually big and i am not able to think of an instance for this case.
Still I am considering the div element with class=”confirmBox” to be the code for confirmBox and attaching the fiddle http://jsfiddle.net/W6ATN/47/.

Answer 1

You can use 50% left and top positions, and then subtract half of the width and height to make up for the size of the element:

position:absolute;
top:50%;
height: <your value>px;
margin-top: (negative value of your height, divided by 2);
width:<your value>px;
left:50%;
margin-left: (negative value of your width, divided by 2);

I think this way is easier to understand. If the width of the element is 40% (of its container), then it should be 30% to the left to be equally centered:

|-----30%-----|-------40%--------|-----30%-----|

which all == 100%

Or

you can use % width and % height, and use simple math to figure out the left and top positioning:

position:absolute;
height:40%;
width:40%;
left:30%; // (100 - width) divided by 2
top:30%; // (100 - height) divided by 2