`vertical-align: middle` doesn't do what I expected

Question

If I am in a table cell in a apply the CSS rule vertical-align: middle; to that cell then all the text centers vertically in the cell.

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>

However, if I apply this to another element it functions differently or not at all. For example:

<div style="width: 300px; height: 400px; vertical-align: middle;">
    I am not vertically centered, but I wish I was :(
</div>

But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.

Here is a jsfiddle with examples of all these scenarios.

My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?

@Zack This works, but not if the `DIV` is `position: absolute`. Any idea why? — CatDadCode, May 08 '12 at 20:28
This article tells it all: [Understanding vertical-align](http://phrogz.net/css/vertical-align/index.html) — Didier Ghys, May 08 '12 at 20:30
@AlexFord Applying `vertical-align:center` and `position:absolute` to the same CSS box doesn't make sense. `position:absolute` means "place the box exactly as specified by `left:` etc" so vertical alignment isn't allowed to move the box anymore. — zwol, May 08 '12 at 20:38
@Zack It does make sense in that I am trying to vertically center the text within the DIV, not the DIV itself. Jonathan Payne's answer does what I'm looking for. — CatDadCode, May 08 '12 at 20:45
Possible duplicate of [Center a div without knowing the height](http://stackoverflow.com/questions/10283138/center-a-div-without-knowing-the-height) and others. — Mr Lister, May 08 '12 at 20:49

Jonathan Payne · Accepted Answer · 2012-05-08T20:35:29.767

2

Add display: table-cell to your div.

jsFiddle: http://jsfiddle.net/7FYBa/20/

<div class="outer" style="position:absolute;">
    <div class="inner" style="display:table-cell; vertical-align:middle;">
        I am not vertically centered, but I wish I was :(
    </div>
</div>

edited May 08 '12 at 20:35

answered May 08 '12 at 20:29

Jonathan Payne

2,223
13
11

Thanks Jonathan. This is useful in most situations, but in my usage I need to have the div with `position: absolute` and then the centering stops. http://jsfiddle.net/Chevex/7FYBa/2/ Any ideas? – CatDadCode May 08 '12 at 20:30
If you're absolutely positioning your DIV, then you (virtually) won't ever be able to vertically center it in the surrounding element. – Matt Huggins May 08 '12 at 20:35
@AlexFord You can wrap it in a parent div, and absolute position that instead. I updated my answer and fiddle. – Jonathan Payne May 08 '12 at 20:36

score 2 · Answer 2 · answered May 08 '12 at 20:36

2

But of course. Vertical centering is pretty funky in CSS.

I'd suggest you read up on some of the vertical centering techniques out there. Different elements and considerations equate to different methods. Here's an article I'd suggest.

answered May 08 '12 at 20:36

Richard Neil Ilagan

14,627
5
48
66

score 0 · Answer 3 · answered May 08 '12 at 20:41

0

You can try something like this using jQuery http://jsfiddle.net/7FYBa/30/

answered May 08 '12 at 20:41

Vitalii Petrychuk

14,035
8
51
55

score 0 · Answer 4 · answered May 08 '12 at 20:45

0

vertical-align works for none-table-elements when you increase the line-height.

#elem {
    vertical-align: middle;
    line-height: 100px;
}

But of course layouting is not that easy using line-height.

answered May 08 '12 at 20:45

Johannes Egger

3,874
27
36

`vertical-align: middle` doesn't do what I expected

4 Answers4