在 HTML 中居中

在 HTML 中居中元素，有很多种方法。本文将介绍一些最流行的居中方法，让您轻松地在您的网页中实现元素居中。

居中文本

水平居中

要让文本水平居中，可以使用以下 CSS 代码：

text-align: center;

例如：

<p style="text-align: center;">这是居中的文本。</p>

垂直居中

要垂直居中文本，可以使用以下 CSS 代码：

display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100%; /* 让父元素的高度为 100% */

例如：

<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
  <p>这是垂直居中的文本。</p>
</div>

居中图片

水平居中

要让图片水平居中，可以使用以下 CSS 代码：

display: block;
margin: 0 auto;

例如：

<img src="example.jpg" alt="Example" style="display: block; margin: 0 auto;">

垂直居中

要垂直居中图片，可以使用以下 CSS 代码：

display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100%; /* 让父元素的高度为 100% */

例如：

<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
  <img src="example.jpg" alt="Example">
</div>

居中容器

要居中容器，可以使用以下 CSS 代码：

margin: 0 auto;

例如：

<div style="margin: 0 auto;">
  <p>这是居中的容器。</p>
</div>

结论

这些是最流行的在 HTML 中居中元素的方法。当然，还有其他的方法可以实现，但你应该选择最适合你的情况的方法。