How to make text vertically and horizontally center in an HTML page

Question

I have some experience with Java , C , databases , networking etc..But anything related with Html I am a begginer.The only thing that I am looking for is to center two words in the middle of the page(This page will have only those two words).

                                WORD1
                          WORDWORDWORDWORD2

I have tried some WYSIWYG software like KompoZer, but when I looked to the source code, it had generated a horrible static code with a lot of <br> to achieve the vertically center of the page.Anybody could help me finding a good solution to this problem

define "in the middle of the page". Centered up and down (verticle)? Centered left and right (horizontal)? — DwB, Mar 22 '12 at 15:52
Yes Simon, i am completely thankfull by all the quick answers but the problem is that all of them just solve the horizontal centered.What i need is both positions(horizontal and vertical).Both words must be on the center of the page — tt0686, Mar 22 '12 at 15:56

acme · Accepted Answer · 2012-03-23T08:15:59.193

Centering horizontally is easy - centering vertically is a bit tricky in css as it's not really supported (besides table cells <td>, which is bad style for layouting unless a table is really needed as - well - a table). But you can use semantically correct html tags and apply table display properties to it.

That's one possible solution - there are many approaches, here is a good article on that.

In your case something like that should be sufficient:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Hello World</title>
        <style>

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div class="my-block">
       WORD1<br />
       WORDWORDWORDWORD2
    </div>
    </body>
</html>

You're welcome - (html purists would directly use the `` as text container instead of an additional div). — acme, Mar 22 '12 at 16:47

score 2 · Answer 2 · answered Mar 22 '12 at 15:52

2

You can put the text inside a <div> and align the text using CSS :

<div style="text-align:center;">
    WORD1<br />
    WORDWORDWORDWORD2
</div>

the <div> is a block element which means it will be stretched to 100% width and the text will be in in the center of the page

jsFiddle example

answered Mar 22 '12 at 15:52

Teneff

30,564
13
72
103

As mentioned on another answer, for a beginner this is fine, but in general HTML should be as semantic as possible, and in line style violates that principal as well as separation of concerns. – Chris Sobolewski Mar 22 '12 at 16:05

Trunk · Answer 3 · 2021-04-03T21:15:42.663

These times full centering is best achieved using either flexbox or grid layout. So if we just want to center some element within its parent we do something like this:

HTML

<div class="parent">
   <div class="child">Some Stuff</div>
</div>

CSS

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Or this way if the page doesn't have to uncenter with changing screen size */
/* .parent {
       display: flex;
       place-items: center;
   }  */

.child {
    text-align: center;   /* If we want the child element's content horiz centered within its own container */
}

Chris Sobolewski · Answer 4 · 2012-03-22T15:56:57.157

The "best practice" way to do it would be this:

Since you say you're new, I'm showing the whole document structure for you. Style should go in the head tag so that it is loaded first, and you should avoid inline style as much as possible.

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>WORD1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>

score 0 · Answer 5 · answered Mar 22 '12 at 15:49

0

Just do it like

<div style="text-align:center;">
   WORD1<br />
   WORDWORDWORDWORD2
</div>

answered Mar 22 '12 at 15:49

irfanmcsd

6,533
7
38
53

2

For a beginner this is fine, but in general, HTML should be as semantic as possible, and in line style violates that principal as well as separation of concerns. – Chris Sobolewski Mar 22 '12 at 15:55

score 0 · Answer 6 · answered Mar 22 '12 at 15:51

best way is to put it in some element like div. inside div you can easily center text with text-align: center; (assuming that you set some width to that div). Then you can center that div on page by adding auto margin style (margin: 0px auto;)

w3 manual about centering ;-)

score -2 · Answer 7 · answered Mar 22 '12 at 15:50

-2

To center text you could use the <center> HTML tag:

<center>Blah</center>

or you could use CSS:

<style>
  .centered_text {
    text-align:middle;
  }
</style>

<a class='centered_text'>Blah</a>

answered Mar 22 '12 at 15:50

Adjam

598
1
8
22

3

`` is hideously deprecated and should not be used. `` is, by default, `display: inline` so the `text-align` property does not apply to it. – Quentin Mar 22 '12 at 15:51
`Center` is deprecated. HTML handles data, CSS is for display. – Chris Sobolewski Mar 22 '12 at 15:52
Thanks for the info @Quentin and @Chris Sobolewski. Had no idea you shouldn't use ``. And now I think about it, you're right about using the `` tag for text-align. I'll leave this answer here so others can read the comments and see where I went wrong. – Adjam Mar 22 '12 at 17:08
Oh, and `middle` isn't a valid value for the `text-align` property either. – Quentin Mar 22 '12 at 17:19

How to make text vertically and horizontally center in an HTML page

7 Answers7

HTML

CSS

Linked

Related