如何使文本在 HTML 页面中垂直和水平居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9825796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text vertically and horizontally center in an HTML page
提问by tt0686
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).
我在 Java、C、数据库、网络等方面有一些经验。但是任何与 Html 相关的东西我都是初学者。我唯一要找的就是在页面中间居中两个词（这个页面只有这两个字）。
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
我尝试过一些 WYSIWYG 软件，比如 KompoZer，但是当我查看源代码时，它生成了一个可怕的静态代码，其中有很多<br>来实现页面的垂直中心。任何人都可以帮助我找到解决这个问题的好方法
回答by acme
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.
水平居中很容易 - 在 css 中垂直居中有点棘手，因为它并没有得到真正的支持（除了表格单元格<td>，这是一种糟糕的布局风格，除非真的需要表格以及表格）。但是您可以使用语义正确的 html 标记并将表格显示属性应用于它。
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>
回答by Teneff
You can put the text inside a <div>and align the text using CSS :
您可以将文本放入 a<div>并使用 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
这<div>是一个块元素，这意味着它将被拉伸到 100% 宽度并且文本将位于页面的中心
jsFiddleexample
jsFiddle示例
回答by Chris Sobolewski
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.
既然你说你是新手，我就为你展示整个文档结构。样式应该放在 head 标签中，以便它首先加载，并且您应该尽可能避免使用内联样式。
<!DOCTYPE html>
<html>
<head>
<style>
.center{
text-align:center;
}
</style>
</head>
<body>
<div class="center">
<p>WORD1</p>
<p>WORDWORDWORDWORD2</p>
</div>
</body>
</html>
回答by Gatekeeper
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;)
最好的方法是把它放在像div这样的元素中。在 div 中，您可以轻松地将文本居中text-align: center;（假设您为该 div 设置了一些宽度）。然后，您可以通过添加自动边距样式 ( margin: 0px auto;)在页面上居中该 div
回答by irfanmcsd
Just do it like
就这样吧
<div style="text-align:center;">
WORD1<br />
WORDWORDWORDWORD2
</div>
回答by Adjam
To center text you could use the <center>HTML tag:
要居中文本，您可以使用<center>HTML 标签：
<center>Blah</center>
or you could use CSS:
或者你可以使用 CSS：
<style>
.centered_text {
text-align:middle;
}
</style>
<a class='centered_text'>Blah</a>
