How do I vertically align my wrapper so it will be centered on a (mobile) screen?

Question

I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.

I've seen a lot of questions about this problem, but couldn't find a solution specified on my css yet. Hope someone can help me out.

HTML

<body>
  <div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
      <a href="http://test"><div id="topleftbox"></div></a>
      <a href="http://test"><div id="toprightbox"></div></a>
      <a href="http://test"><div id="bottomleftbox"></div></a>
      <a href="http://test"><div id="bottomrightbox"></div></a>
    </div>
  </div>

CSS

    body {

    }

    .wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }

    .header {
    min-width: 50%;
    height: 20px;
    }

    .content {
    min-width: 500px;
    width: 40%;
    height: auto;
    margin: 0 auto;
    }

    #topleftbox {
    background: url(..);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: left;
    }

    #toprightbox {
    background: url(...);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: right;
    }

etc.

score 3 · Accepted Answer · answered Feb 26 '13 at 22:49

To use display:table-cell; you need to simulate the full table structure. Luckily you won't have to add any extra markup since you can style against the html and body tags:

html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Note: this vertically centers .wrapper's content, not the div itself.

score 0 · Answer 2 · answered Feb 26 '13 at 22:40

0

You could use display:table to render your DIVs like tables and table cells.

More here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

answered Feb 26 '13 at 22:40

Mike

1,158
5
22
32

score 0 · Answer 3 · answered Feb 26 '13 at 22:46

Unlike with centering horizontally there never has been a CSS way to center vertically. The only way is to use javascript to grab the "window.innerHeight" then add the height of the HTML element (wrapper) to it and divide the total in half. And set that as the new top position.

Also your "wrapper" has a height of 100% this should mean it fills the entire screen height. It will not center if it is the same height as the screen. Also it has a width of 100%, I doubt the "margin: 0 auto" is doing anything.

score 0 · Answer 4 · edited May 23 '17 at 10:26

Vertical align within CSS has a few options:

1. Via table-cell. (This does work in IE8+)

{
    display:table-cell;
    vertical-align:middle;
}

2. line-height = height of element (If you have more than one line of text this will look funky I imagine)

{
    height:10em; 
    line-height:10em;
}

There are more options you can find, but I believe display: table should be your best bet nowadays.

http://www.zann-marketing.com/.../vertically-centering-text-using-css.html https://stackoverflow.com/questions/2939914/

How do I vertically align my wrapper so it will be centered on a (mobile) screen?

4 Answers4