How to center a popup inside a div?

Question

I found some solutions for how to center a popup div in the hole screen, but I need to center it (vertically and horizontally too) inside its parent div. The popup doesn't have fixed sizes, they are relative to the parent div's sizes. I haven't found anything about this and I couldn't do it myself. So please help if you have any ideas.

Here's my code: http://jsfiddle.net/crXCz/

<div id="container" style="width: something; height: something;> some text <br> some text     
<div class="popup"></div>
</div>


div.popup {
    height: 95%;
    width: 95%;
    border-color: #d3d7cf;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    background-color: #f3f3f3;
    z-index: 1;
}

This might be useful for you: http://stackoverflow.com/questions/11332414/simplest-vertical-alignment-we-can-think-of — unclenorton, Dec 23 '12 at 19:01
An alternative is with jQuery BlockUI Plugin: http://www.malsup.com/jquery/block/overlay.html Regards. — alditis, Dec 23 '12 at 18:55

Sumit Gera · Answer 1 · 2012-12-23T19:07:09.800

0

We'll need to understand your document code. But according to my understanding you want to center the div element. Set the position of the div element to be relative and that of the main container to be absolute and add following CSS code to the popup box.

.popup{
position:absolute;
top:50%;
height: <your value in percentage>;
margin-top: (negative value of your height, divided by 2);
width:<your value in percentage>;
left:50%;
margin-left: (negative value of your width, divided by 2);
}

edited Dec 23 '12 at 19:07

answered Dec 23 '12 at 18:57

Sumit Gera

1,249
4
18
34

This one will center my popup in the screen and not in the parent div, since it's using absolute position. And this works only with fixed sizes – balping Dec 23 '12 at 19:00
Consider adding the fiddle so that we can understand your situation. And I told you to set the position of the popup element to be relative and that of the main div to be absolute! – Sumit Gera Dec 23 '12 at 19:02

score 0 · Answer 2 · edited Dec 23 '12 at 19:12

0

If I understand you correctly both of your elements are dynamic in height. What I usually do is add a bit of javascript. (Assuming jQuery)

function verticalAlign(el) {
    // Calculate marginTop by taking parents height minus element height
    // and divide the value by two
    var marginTop = (el.parent().height() - el.height()) / 2;

    // Apply the top margin to the element
    el.css('margin-top', marginTop);
}

verticalAlign($('.verticalAlign'));

edited Dec 23 '12 at 19:12

balping

7,518
3
21
35

answered Dec 23 '12 at 19:02

JimmyRare

3,958
2
20
23

You're right, both of my elements are dynamic in height and in width too – balping Dec 23 '12 at 19:03

How to center a popup inside a div?

2 Answers2