Question

<a href="javascript:;" onclick="$('#example').fadeIn('fast');">FadeIn!</a>

<div class="midbox" id="example" style="display:none;">
    Lorum ipsum<br>
    <br>
    [<a href="javascript:;" onclick="$('#example').fadeOut('fast');">Close</a>]
</div>

 

.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:35%;
    padding: 8px;
}

I’ve searched through many topics on Google and here on Stackoverflow, but i can’t seem to find my answer.

I put the midbox classes just before the end of the body tag (</body>). Now i click on this link to fade the box in, but it isn’t showing up in the middle, it shows up without the css i gave it and at the bottom of the page.

Why is it doing this? Can you guys help me?
Thanks.

Answer 1

Here you go:

.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    margin-left:-300px;     /* half of width */
    margin-top:-200px;     /* half of height */
    padding: 8px;
}

DEMO