Grow your CSS skills. Land your dream job.

Vertical Align with Auto height parent

  • # April 28, 2010 at 3:55 pm

    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?

    # March 3, 2011 at 6:15 pm

    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?

    # March 3, 2011 at 7:01 pm
    #wrapper { position:relative;}

    #content { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
    # March 4, 2011 at 12:59 am

    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








    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;
    }
    # April 26, 2012 at 1:36 am

    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?

    # April 26, 2012 at 8:19 am

    Have you seen this article on centering the unknown?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".