0

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?

annie
  • 5
  • 2
  • Simple answer: you can't using css, see: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen (or you can use fixed position) – XCS Jan 14 '13 at 11:32

2 Answers2

0

Try this adding this to you CSS and I think it will work as you want:

div.loginContent {
    position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
Панайот Толев
  • 6,597
  • 5
  • 19
  • 28
  • Awesome, thank you! Of all the searches I've made on Google, I haven't come across this solution. You saved my day :) – annie Jan 14 '13 at 10:59
  • Note that this will center the div inside the page, not inside the container as the container position is absolute too. Also, this will NOT center the div relative to the viewport size, but to the content size. If the page it's 2000px tall on 1024*768 monitor this div will not even be visible. – XCS Jan 14 '13 at 11:31
0

As I see you are working with fixed heights why don't you simple add the correct margin size to center the div?

div.loginContent {
    margin:15px auto;
}

http://jsfiddle.net/kSUbe/

Or, if you can do the same as you did with the container. If you have top:50% the content div will start from the middle of the container, but if you want it to be centered you have to move it upwards by half of it's size.

div.loginContent {
    margin:-135px auto 0 auto;
    top:50%;
}

http://jsfiddle.net/kSUbe/1/

XCS
  • 27,244
  • 26
  • 101
  • 151
  • The first suggestion I wanted to avoid since I thought there'd be an easier way than trying to count pixels. The second suggestion I thought I'd tried, but I had missed to position it relatively and set it to absolute - which doesn't work. Very new at this... So thanks! – annie Jan 14 '13 at 11:12
  • You should always choose to position elements relatively when you have the chance, absolute-positioned elements often get you in trouble :D – XCS Jan 14 '13 at 11:13
  • Thanks for the tip Christy! I will definitely take that in to consideration now, seeing as it certainly did this time and gave me a wake up call ;) – annie Jan 14 '13 at 11:16