I am trying to align a div within a div so that it ends up completely in the middle, but I just can't make it work and I have tried so many things. Here's my code as it looks now:
HTML
<div class="loginContainer">
<div class="loginContent">
This div should be in the middle of the outer div
</div>
</div>
CSS
div.loginContainer {
width:100%;
height:300px;
position:absolute;
top:50%;
margin-top:-150px;
background-color:#ffffff;
background: url('bg.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.loginContent {
margin:0 auto;
height:250px;
width:300px;
padding:10px;
position:relative;
top:-50%;
background-color:#ffffff;
border-radius:20px 20px 20px 20px;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
-khtml-border-radius:20px 20px 20px 20px;
box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
-webkit-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
-moz-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
-webkit-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
-moz-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
}
The closest I can get is that it is horizontally aligned and ALMOST vertically, but it is still closer to the bottom end of the outer div.
What have I done wrong?