Grow your CSS skills. Land your dream job.

How to y(vertically) center body.

  • # May 30, 2013 at 1:18 pm

    Hey, I have an issue that I’ve never really considered before:

    I build all my sites on a laptop. My laptop’s screen is only 13 inches. I recently took a look at one of my sites on my friends HUGE monitor.

    Alas, all my content on non-scrollable pages looked awkwardly short and high on the screen.

    Is there a way to center the entire body on the y axis? I.e. up and down?

    Any help is greatly appreciated.

    # May 30, 2013 at 1:34 pm

    If your content is in a container like, an example,

    … Then in your CSS give it a height and width and margin: 0 auto 0 auto.

    .container {
    width: __px;
    height: __px;
    margin: 0 auto 0 auto;
    }

    # May 30, 2013 at 1:46 pm

    I always contain all my content in a wrapper. I guess that’s my mistake. I’ve been trying to style the body.

    I will try this and see if it works. Thanks!

    # May 30, 2013 at 2:36 pm

    There are a few ways to do it, it’s definitely one of the overlooked things of design. Vertical alignment is shaky at best.

    The best results I’ve turned are from using a setup similar to this:

    body {display:table;height:100%;width:100%;}
    header,main,footer{display:table-row;width:100%;}
    main {height:80%}
    header,footer {height:10%}

    At this point you could set vertical alignment as all height is set in the parent elements. Gets rather wonky if you attempt to have a responsive design site, so I suggest using progressive enhancement with block and inline-block level elements first then transitioning to the table method with media queries.

    # May 30, 2013 at 2:48 pm

    If you does not mind targetting quite modern browsers only you can use pseudo elements:

    html, body { height: 100%; }
    body { text-align: center; }
    body::before
    {
    content: ”;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }
    #content
    {
    display: inline-block;
    }

    # May 30, 2013 at 3:18 pm

    hello,

    you can as well use display:table ; it includes IE8 as the :before (not ::before wich IE 8 doesn’t recon .)

    Test here : http://dabblet.com/gist/5673775 or http://jsfiddle.net/GCyrillus/zjeQs/ .

    In the CSS test , I included display:flex; , but only for the future. see comments .

    If you want to know more about flexboxes :

    http://www.w3.org/TR/css3-flexbox/

    http://the-echoplex.net/flexyboxes/

    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

    # May 30, 2013 at 3:34 pm

    and just discovered this not far away :) http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    # May 30, 2013 at 4:01 pm

    here’s an exemple : http://codepen.io/maxisix/pen/sEBla

    # June 27, 2013 at 2:05 pm

    @maxisix That is sick! Would that work for a huge block of content?

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

You must be logged in to reply to this topic.

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