How to center text vertically in HTML using CSS only

Question

I have a very simple HTML. Due to some limitations, I cannot modify the HTML content. I want to center the text vertically only using CSS.

<html>
    <head>...</head>

    <body>
        <div>Oops, the webpage is currently not available.</div>
    </body>
</html>

Note that the size of the HTML can be variable.

In addition, if the text cannot be displayed in one line, it should be broken into multiple lines.

Is it possible?

score 4 · Accepted Answer · answered May 31 '10 at 11:41

4

I think vertical-align only works for content which is in a table. For your simple page you could put the content in a table instead of a div to avoid this problem.

There are some workarounds, see http://phrogz.net/css/vertical-align/index.html

answered May 31 '10 at 11:41

Matschie

1,237
10
9

The brave new world of CSS. You have to use `position: absolute` or `line-height` to do something as complex as vertically align some content. (Not criticizing you @matschie, just not understanding what the committee that put together this standard was *thinking*) – Pekka May 31 '10 at 11:48
Well really IE's fault otherwise using `display: table` would work fine. – Jakub Hampl May 31 '10 at 11:56
"line-height" has a problem actually. if the text is too long, the rest of them is out of the visible area. Anyway, I have given up. I use a table instead. – stanleyxu2005 May 31 '10 at 11:59
Pekka I totally agree with you, those solutions are not nice but I cant really think of anything else right now. – Matschie May 31 '10 at 12:03

score 3 · Answer 2 · edited May 19 '18 at 17:54

3

Another possible solution:

<html>
    <head>
        <title>Title</title>
        <style>
            body {height:100%}
        </style>
    </head>

    <body>
        <div style="height:100%;">
            <div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
        </div>
    </body>
</html>

edited May 19 '18 at 17:54

Peter Mortensen

30,738
21
105
131

answered May 31 '10 at 11:48

Davide Ungari

1,920
1
13
24

score 2 · Answer 3 · edited May 19 '18 at 17:54

2

<html>
    <head>...
       <style type="text/css">
           div{
               width: 300px;
               height: 300px;
               border: solid blue;
               display: table-cell;
               vertical-align: middle;
           }
       </style>
    </head>

    <body>
        <div>This works fine!</div>
    </body>
</html>

edited May 19 '18 at 17:54

Peter Mortensen

30,738
21
105
131

answered May 31 '10 at 11:46

Bakhtiyor

7,198
15
55
77

You can skip width, height, border attributes. They are used just to show visually the task. – Bakhtiyor May 31 '10 at 11:48
1

Though `table-cell` is not supported by IE <= 7. – Jakub Hampl May 31 '10 at 11:55

score 1 · Answer 4 · edited May 19 '18 at 20:26

<html>
    <head>
        <style type="text/css">
            .vertical {
                margin: 0;
                background: yellow;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%) 
            }
        </style>
    </head>
    <body>
        <div class="vertical">
         Centered
        </div>
    </body>
</html>

score -2 · Answer 5 · edited May 19 '18 at 17:55

-2

Try this:

.text-tag{

    text-align: center;
    margin-top: 25%;
}

And apply "text-tag" to the text you want to center.

edited May 19 '18 at 17:55

Peter Mortensen

30,738
21
105
131

answered Nov 02 '13 at 01:42

ENSATE

325
5
12

How to center text vertically in HTML using CSS only

5 Answers5

Linked