Vertical Align with Auto height parent

[brad_langdon]

I am aware how to vertically align something when the parent has a fixed height but I want to vertically align a div inside my wrapper div which scales to fit the browser window so at present my wrapper div has a height: auto and min-height: 100%;

Basically I want my content div to always be vertically centerd no matter what size browser window is open.

Any ideas?

[vcarol]

I have the same problem. I have three divs inside a wrapper (as header, content, footer) and I need them to be centered in the middle of the page, like brad_langdon said, no matter what size the browser window. Can anyone help?

[noahgelman]

#wrapper { position:relative;}



#content { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}

[davidlab.be]

I have always had this example in my back pocket because the question always seem to come up. Run the code below and play with it. Inspect it with firebug and you will see what is happening. It also includes a sticky footer.

Box One






Box Two














Navbar

html, body {

height:100%;

margin:0;

padding:0;

}

body {

background:#eae7d7;

text-align:center;

min-width:600px;

min-height:400px;

}

#vertAlign {

float:left;

height:50%;

margin-top:-270px;/* half vertical height plus add half the nav height..vertical height is 200px...140px is the nav height... 200px plus 70px = -270px*/

width:100%;

}

#hozAlign {

width:800px;

margin-left:auto;

margin-right:auto;

min-height:400px;

overflow:auto;/* allow content to scroll inside element */

text-align:left;

clear:both;

}

h1 {

color:#fff;

margin:0;

padding:0

}

#boxOne {

float:left;

position:relative;

width:250px;

height:400px;

background-color:#900;

}

#boxTwo {

float:right;

position:relative;

width:500px;

height:400px;

background-color:#060;

}

/*stick navbar*/





#contentWrap {

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -140px; /* the bottom margin is the negative value of the nav's height */

}

#nav, .push {

height: 140px;/* .push must be the same height as #nav */

}

#innerNav {

width:100%;

height:100px;

background-color:#006;

}

[Itchybrain]

If the child element has a known/fixed height, I’ve often used a setup where I absolutely position the child in the parent using with a top position of 50%. Then move the child element up using a negative margin whose dimension is half it’s own height.

For example, a 150px high div (child) will be moved up -75px.

Not sure what to do with child elements who have a dynamic height. Perhaps use jQuery to get the element’s height, divide by two and insert that into the negative margin using inline css via jquery?

[Mottie]

Have you seen this article on centering the unknown?

[Author]

Posts