Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to y(vertically) center body.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #45261
    nixnerd
    Participant

    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.

    #137089
    darcher
    Member

    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.

    #137092
    BaliBalo
    Participant

    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;
    }

    #137103
    maxisix
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.