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

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

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 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

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>

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 */
}

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

HTML

CSS

Related

Recent Posts