Question

I am trying to align vertically a modal box. But the margin-top:50% did not work as i expect. Basically i want a square centered on another square.

<style type="text/css">
#modal {
    width: 300px;
    height: 300px;
    z-index: 100;
    background-color: red;
    margin: 0 auto;
    position:relative;
    margin-top:50%; //problem here

}

#content {
    position: absolute;
    width:950px;
    height: 950px;
    margin: 0 auto;
    background-color: green;
}

#replace {
 width:950px;
 height:500px;   
}


</style>

<div id="replace">
<div id = "content"></div>
<div id="modal"></div>
</div>

thanks

demo

Answer 1

Instead of margin you need to use top:325px; for #modal