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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:50:10+0000

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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags