Search code examples
htmlcsspositionalignment

Div inside anothe div does not vertically align

I am trying to center a div within a container which all have % heights and widths. I can get the div to be horizontally aligned but not vertically.

Can anyone please tell me what I am doing wrong?

HTML : 

<div id='container' >
    <div id="login">
    </div>
</div>

CSS : 

html,body{
    height:100%;
    width: 100%;
    margin: 0;
}

#container{
    height: 99%;
    width: 99%;
    margin: auto;
}

#login{
    width: 30%;
    height: 30%;
    border: groove 1px grey;
    margin: auto;
}

JsFiddle is: http://jsfiddle.net/g83RY/

Solution

  • Just give position:relative; top: 35%; to #login.

    which is half of the remaining height in the container i.e 100 - 30 = 70 => 70/2 = 35%.

    How this work is:

      // 35% space on top
  // 30% space occupied by login
  // 35% space on bottom (occupied automatically)

  //which is equal to 100

    Working Fiddle