CODEWITHSUNDEEP
cssalignment
Sumit Gera
Sumit Gera

Reputation: 1241

Aligning of modal box

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/.

Upvotes: 2

Views: 610

Answers (2)

user9434733
user9434733

Reputation: 1

// Slightly modified custom css with all due credit to it's previous owner  
//
//           @@ Cat...

.vertical-align-center {

left: 0%; // <<<------ Align left and comfortably stretch across the screen
display: table-cell;
vertical-align: middle pointer-events: none;
}

Upvotes: 0

d-_-b
d-_-b

Reputation: 23161

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

Upvotes: 4

Related Questions