vertical-align in div with height 100%

Question

Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.

Is there an easy way to achieve this without hacks or javascript?

I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}

but that doesn't work...and with that code, i have to specify width in pixels instead of percentage

Not exactly. Some answers are about making the div 100% in height and some are about vertical aligning. making them co-exist is what i want to do — MayThrow, Aug 21 '12 at 16:47
Height in CSS (with the exception of a finite object with fixed dimensions) is a nightmare! I have tried countless times to accomplish this, and just when I think I have it... The solutions breaks something else. If there is any way to avoid this scenario, I would suggest doing so. — CoderMarkus, Aug 21 '12 at 17:17

score 15 · Accepted Answer · edited Jan 03 '14 at 02:43

Live Demo

I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.

HTML

<div id="outer">
    <div id="table-container">
        <div id="table-cell">
            This content is vertically centered.
        </div>
    </div>
</div>

CSS

#outer {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}

#table-container {
    height:100%;
    width:100%;
    display:table;
}

#table-cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}

For reference, I used this tutorial.

It works for me! Thanks. – Roel Magdaleno Jul 13 '15 at 00:35 — Roel Magdaleno, Jul 13 '15 at 00:35

score 0 · Answer 2 · answered Aug 21 '12 at 16:49

0

position: absolute;
top: 0;
bottom: 0;

Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:

html, body {
  height: 100%;
}

answered Aug 21 '12 at 16:49

Henrik

3,908
27
48

1

But that leaves the question half-answered. What about vertical-alignment issue? With your code, the content is not vertically aligned even with `display:table-cell;vertical-align:middle` – MayThrow Aug 21 '12 at 17:00

score 0 · Answer 3 · answered Aug 21 '12 at 17:10

0

Do you want this type of design ? => Example Fiddle

answered Aug 21 '12 at 17:10

ygssoni

7,219
2
23
24

vertical-align in div with height 100%

3 Answers3

Live Demo

HTML

CSS