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

回答1:

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>

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

回答3:

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>

回答4:

Just do it like

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

回答5:

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

回答6:

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>

来源：https://stackoverflow.com/questions/9825796/how-to-make-text-vertically-and-horizontally-center-in-an-html-page

标签

html

css

text-alignment