原文：Text Align in CSS – How to Align Text in Center with HTML，作者：Jessica Wilkins

有很多时候，你会需要使用 HTML 和 CSS 将一些文本居中。但什么才是最好的方法呢？

在这篇文章中，我将向你展示如何使用 CSS 中的 text-align 属性，并向你展示如何使用 CSS Flexbox 垂直对齐文本。我还将谈谈 标签，以及为什么你不应该用它来居中显示文本。

当你使用标题或段落标签时，HTML 中的默认样式会将文本定位在页面的左侧。

在这个例子中，我们有一个 ，它被放置在页面的左上方。

如果我们想在页面上水平居中文本，那么我们可以使用 text-align 属性。

如果你想让页面上的所有文本水平居中，那么你可以使用 body 选择器中的 text-align 属性。

在接下来的这个例子中，我们的 HTML 中还有一些文本。

Here is my first paragraph

Here is my second paragraph

在没有任何样式的情况下，它目前在页面上看起来是这样的。

在我们的 CSS 中，我们可以定位 body 选择器并使用 text-align 属性。

text-align 属性是用来将文本在页面上水平居中的。但我们也可以使用 CSS Flexbox来使文本垂直居中。

在这个例子中，我们的 HTML 里有一些文本：

Flexbox is cool!!!

这是它目前没有任何样式的样子：

我们可以使用 text-align 属性将 居中。

然后，我们可以使用 Flexbox 对 flex-container div 内的段落进行水平和垂直居中。

在旧版本的 HTML 中， 标签被用作将文本在页面上水平居中的一种方式。

This paragraph is also centered

很多新的开发者仍然会使用这个标签，因为它确实能显示正确的结果。然而， 标签在 HTML 4 中被废弃了，因为最佳做法是使用 CSS 的 text-align 属性来代替。

重要的是要记住，HTML 是用于内容的，而 CSS 是用于样式的。最好的做法是将这两个问题分开，不要将 HTML 用于样式设计。

我希望你喜欢这篇关于如何使用 HTML 和 CSS 将文本居中的文章。