How do I center the div vertically?

Question

Possible Duplicate:
What's The Best Way of Centering a Div Vertically with CSS

.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
top:50%;
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
}

Right now, it doesn't seem to work. top 50% doesn't center it vertically. It's a little to the bottom. It's as if the top border is 50%.

try first adding an arbitrary height – Eric Fortis Dec 14 '10 at 01:55 — Eric Fortis, Dec 14 '10 at 01:55

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

How to vertically center a div for all browsers?

edited May 23 '17 at 12:25

Community

1
1

answered Dec 14 '10 at 01:57

Gaurav

12,662
2
36
34

score 2 · Accepted Answer · answered Dec 14 '10 at 02:01

If you can specify the height of the box, you can use margin-top: -[height / 2]px (fill in [height / 2] and note that most browsers will round fractional pixels up at 100% zoom).

If you can specify the height of its parent, you can do something like this:

parent {
    height: [height]px;
}
child {
    /* Make the element part of the inline flow, as vertical-align isn't supported on block elements */
    display: -moz-inline-box; /* Old Firefox doesn't support inline-block */
    display: inline-block;
    /* IE < 8 doesn't support inline-block on native block-level elements */
    *display: inline;
    *zoom: 1;

    /* The interesting bit */
    line-height: [height]px;
    vertical-align: middle;
}

If the content of the child is expected to wrap onto multiple lines, you can wrap it in a sub-child that resets the line-height.

score 1 · Answer 3 · answered Dec 14 '10 at 01:57

top: 50%; does exactly what you suspect: it places the top edge at 50% height. You can offset this effect by also applying a negative vertical margin equal to half of the height of the element. For example, if the element was 100px high, you would add this property:

margin-top: -50px;

score 1 · Answer 4 · answered Dec 14 '10 at 02:06

If height of element is fixed, then do following

Css:

.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
**top:50%;**
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
**margin-top: -(half the height)**
}

else to vertically center a div with dynamic height, you would need javascript..

document.getElementById('myElement').style.marginTop = (-1) * document.getElementById('myElement').offsetHeight / 2

How do I center the div vertically?

4 Answers4