如何使文本在HTML页面中垂直和水平居中

小编典典

如何使文本在HTML页面中垂直和水平居中

css

我有Java，C，数据库，网络等方面的经验。但是与Html相关的任何事情我都是初学者。我要寻找的唯一内容是在页面中间居中两个单词（该页面仅包含这两个词）。

                                WORD1
                          WORDWORDWORDWORD2

我曾经尝试过像KompoZer这样的WYSIWYG软件，但是当我查看源代码时，它生成了一个可怕的静态代码，其中很多东西都<br>可以实现页面的垂直居中位置，任何人都可以帮助我找到一个解决此问题的好方法

阅读 470

2020-05-16

共1个答案

小编典典

水平居中很容易-垂直居中在CSS中有点棘手，因为它并没有真正得到支持（除了表格单元格之外<td>，这是布局的不良样式，除非确实需要一个表格-否则-
一个表格）。但是您可以使用语义正确的html标记并将表显示属性应用于它。

在您的情况下，这样就足够了：

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

2020-05-16