Automatically vertically dead centering text in a DIV

Question

I need your help,

I can't seem to be able to automatically dead center the text in my div.

current: enter image description here

expected result: enter image description here Here is the HTML markup:

CSS

#alertBox_container {
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 1px solid #808080;
    position: relative;
    color: rgb(11,63,113);
    background: #FFF;
    font-family: Arial;
}

#alertBox {
    height: 100px;
    width: 400px;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

#alertBox_titlebar {
    line-height:24px;
    width: 100%;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
    font-weight: bold;
    font-size: 9pt;
}

.alertBox_Button {
    color: #464646;
    border: 1px solid;
    border-color: #999 #666 #666 #999;
    background-color:#ccc;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}

.alertBox_Button:hover {
    background-color: #ddd;        
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    color: #000000;
}

#alertBox_close {
    line-height: 11px;
    width: 18px;

    font-size: 9pt;
    font-weight: bold;
    margin: 2px;
    padding: 1px;
    position:absolute;
    top:0px;
    right:0;
}

#alertBox_text_container {
    width: 100%;
    height: auto;
    text-align: center;
}
#alertBox_text {
    font-size: 9pt;
    width: 100%;
}
#alertBox_div_btn_OK {
    width: 100%;
    text-align: center;
    margin: 5px;
}

#alertBox_btn_OK {
    height: 20px;
    width: 50px;
    font-size: 9pt;
}

HTML

<div id="alertBox">
    <div id="alertBox_container">
        <div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
        <div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
        <div id="alertBox_text_container"><div id="alertBox_text">this is some text that should be vertically centered</div></div>
        </div>
    </div>
</div>

Fiddle http://jsfiddle.net/VuEwu/

IE7-HTA (were stuck using this at work until they upgrade our windows) — John Smith, Sep 25 '13 at 18:38
possible duplicate of [Vertically centering a div inside another div](http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) — Pavlo, Sep 25 '13 at 19:27

score 2 · Answer 1 · answered Sep 25 '13 at 18:55

2

Here is a solution: Fiddle.

The main idea is to use

display: table-cell
vertical-align: middle;

It may not work in old browsers that don't support table-cell value for css display property. In such a case, here is a very nice explanation and solution for this problem in general.

answered Sep 25 '13 at 18:55

Max Malyk

860
5
8

1

Best solution- that or line-height or padding to solve the problem. – Web Owl Sep 25 '13 at 19:29

score 1 · Answer 2 · answered Sep 25 '13 at 18:49

1

you can solve it using margin-top style

#alertBox_text_container {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top:20px;
}

Live Demo

answered Sep 25 '13 at 18:49

Blue Diamond

11
2

Setting hardcoded 20px margin is not scalable code, changing the size of the dialog will break the whole thing... – Max Malyk Sep 25 '13 at 18:57

bmasterson · Accepted Answer · 2013-09-25T19:31:29.060

Vertical centering is tricky. It's easiest and most consistent to calculate a percentage manually and add the appropriate margin or padding. There are other ways to do it though. I've provided the four methods I know of below.

css

.center-1{
    position:absolute;
    top:50%;
    width:100%;
    height:1em; /* need a fixed height for the element */
    margin-top:-.5em; /* offset height with negative margin */
    text-align:center;
}

.center-2{
    width:100%;
    height:100%;
    display: table-cell;/* IE8+ */
    vertical-align: middle;
    text-align:center;
}
.center-3{
    width:100%;
    line-height: 300px;/* height of your container */
    text-align:center;
}
.center-4{
    margin-top:29%;/* manual guess that will scale with the box */  
    width:100%;
    text-align:center;
}
.container{
    height:300px;
    width:500px;
    margin:20px;
    border:1px solid black;
    position:relative;
    display: table;/* needed for center-2 */
}

html

<div class="container">
    <div class="center-1">
        Center Me!
    </div>
</div>

<div class="container">
    <div class="center-2">
        Center Me!
    </div>
</div>

<div class="container">
    <div class="center-3">
        Center Me!
    </div>
</div>
<div class="container">
    <div class="center-4">
        Center Me!
    </div>
</div>

http://jsfiddle.net/xSML5/

score 0 · Answer 4 · answered Sep 25 '13 at 19:00

0

I would take the height of the area you want to center the text in, then add that number to the line-height of the element. In this case, you have 24px header, leaving 76px for the text container. So adding:

#alertBox_text_container {
    line-height: 76px;
}

should get you what you want. There are other methods, but this is the simplest for a single-line center.

Fiddle

answered Sep 25 '13 at 19:00

Chad

5,308
4
24
36

If I do a line break with the text by adding a
the text appears out of the box. – John Smith Sep 25 '13 at 19:08
Right. Like I said, that's the good way for a single-line thing. If you want multi-line, then the table-cell method should work, or I have another method if you want cross-browser compatibility. Just let me know if table-cell doesn't work for you. – Chad Sep 25 '13 at 19:09

Automatically vertically dead centering text in a DIV

4 Answers4