无论您是从头开始构建网站还是使用网站构建器构建网站，至少对 HTML 和 CSS 有基本的了解以创建和自定义页面布局都会有所帮助。

构建布局的一个主要挑战是在页面上排列和设置元素样式。您希望元素重叠还是在它们之间留出空间？您是否希望页面上的某些文本居中，其余文本左对齐？你使用普通CSS还是像Bootstrap这样的框架？这些只是您在编码时必须解决的几个问题。值得庆幸的是，div 可以提供帮助。

立即下载： 35 个代码模板 [免费代码片段]

在这篇文章中，我们将介绍在 CSS 中居中元素的多种方法，包括：

• 什么是 div，为什么要将 div 居中？
• 如何在 div 中居中文本？
• 水平
• 垂直
• 如何使 div 居中？
• 水平
• 垂直
• 水平和垂直
• 在 div 内
  
  

什么是 div，为什么要将 div 居中？

div - 内容划分元素的缩写 - 是一个通用的块级HTML元素。Div 可以将您的网页划分为多个部分，以便您可以使用 CSS 定位它们。

例如，假设您想在博客文章中包含一个居中而不是像正文文本的其余部分那样左对齐的块引用。在这种情况下，您可以将文本换行在 div 元素中，并将 CSS 应用于该特定元素。页面上的其他案文将保持不变。

特别是了解如何在 div 中居中 div 和文本，对于初学者程序员来说是一项宝贵的技能。它有助于防止内容拉伸到其容器的边缘、与页面上的其他元素重叠或创建网页布局时出现的其他问题。

然而，在HTML和CSS中居中元素并不像点击“中心”按钮那么简单 - 实际上有几种方法可以做到这一点。让我们潜入。

如何在 CSS 中将 div 中的文本居中

使用 CSS，您可以通过多种方式将 div 中的文本居中。最常见的方法是使用文本对齐属性将文本水平居中。另一种方法是使用行高和垂直对齐属性。最后一种方法仅适用于弹性项目，并且需要两端对齐内容和对齐项目属性。使用此方法，可以将文本水平和/或垂直居中。

我们将在下面仔细研究每种方法。

如何水平居中 div 中的文本

有两种方法可以将 div 中的文本水平居中。让我们看一下下面每种方法的示例。

使用文本对齐属性

在大多数情况下，可以使用具有值中心的文本对齐属性在 div 中水平居中文本。

假设您要创建一个包含一小段的 div。在你的 HTML 中，你可以给 div 分配一个类似 center 的类。然后，您可以使用 CSS 选择器 .center 通过文本对齐属性设置其样式

使用两端对齐内容属性

上述规则有一个例外：如果使用 display 属性将 div 定义为 flex 容器，则不能使用文本对齐属性在 div 内水平居中文本。相反，您必须将两端对齐内容属性与值中心一起使用。

让我们创建与上面相同的 div 元素。这一次，将显示属性定义为 flex 以使 div 成为 flex 容器，并将两端对齐内容属性定义为中心。

特色资源：CSS 和 HTML 入门指南

结果如下：

如何在 div 中垂直居中文本

在 div 内垂直居中文本比水平居中文本要复杂一些，但有几种方法可以做到这一点。接下来，我们将介绍每种方法。

使用填充属性

在大多数情况下，可以使用填充属性在 div 中垂直居中文本。使用此方法，填充将采用两个值。第一个值将设置顶部和底部填充。第二个将设置左右填充。由于您希望使文本垂直居中，因此第一个值可以是任何正长度或百分比值。第二个值应为 0。

使用行高属性

通常，您还可以在具有行高属性的 div 内垂直居中文本。

在 HTML 中，在 div 中添加一个段落元素，然后将 div 的行高属性设置为等于 div 的高度。

若要使包含多行的段落居中，请将段落的显示设置为内联块，将行高设置为正常，并将垂直对齐设置为中间。这可确保 div 内的文本垂直居中，无论是一行还是多行文本。

使用对齐项属性

如果使用 display 属性将 div 定义为 flex 容器，则不能使用上述方法在 div 中垂直居中文本。相反，您必须将对齐项属性与值中心一起使用。

让我们创建与上面相同的 div，并为其提供类名 .center。将显示设置为“弹性”以使 div 成为弹性容器。若要更清楚地看到文本是垂直居中的，请同时定义 height 属性。否则，弹性容器将仅达到包含段落所需的高度。然后，将对齐项属性设置为居中。

如何在 CSS 中居中 div

您可以在 CSS 中以几种不同的方式将 div 居中。在页面上水平居中 div 很容易，垂直这样做有点棘手（但仍然可能）。

我们将在下面介绍这两种方法，然后解释如何水平和垂直地将 div 居中或在另一个 div 中居中。

如何水平居中 div

要将 div 在页面上水平居中，只需将元素的宽度和边距属性设置为 auto。这样，div 将占用 CSS 中指定的任何宽度，浏览器在两侧的边距之间平均分配剩余空间。

让我们看一个简单的 CSS 盒模型示例。假设您想创建一个包含一小段的 div。给 div 一个类似中心的类，并自动为其分配边距值。

请注意，边距不同于填充，填充用于在 div 的边框和 div（内联元素）中的段落之间创建空间。您可以在我们的帖子 CSS 边距与填充：有什么区别？

如何垂直居中 div

若要在页面上垂直居中 div，可以使用 CSS 位置属性、top 属性和转换属性。

首先将 div 的位置设置为绝对，以便将其从正常的文档流中取出。然后将 top 属性设置为 50%。这告诉浏览器将 div 的上边缘与页面中心垂直对齐（即页面下方 50%）。

问题是：将 div 的上边缘排列在页面中间不会使 div 居中。您需要定义最后一个属性，即转换属性。

虽然有几种不同的转换方法，但您希望使用 translate（） 方法沿页面的 Y 轴移动 div。您需要将 div 从其当前位置向上移动 50%。这将告诉浏览器将 div 的中心放在页面的垂直中心。

结果如下：

如何水平和垂直居中 div

要在页面上水平和垂直地居中 div，您可以按照上一节中概述的几乎完全相同的步骤进行操作。您将使用位置、顶部和变换。唯一的区别是，您还将使用 left 属性将 div 水平居中。

首先将 div 的位置设置为绝对，以便将其从正常的文档流中取出。然后将左侧和顶部属性都设置为 50%。这告诉浏览器将 div 的左边缘和上边缘与页面中心水平和垂直对齐（即页面右侧和下方 50%）。

最后，将转换属性设置为 translate（-50%， -50%）。这会将 div 从其当前位置向左和向上移动 50%。这将告诉浏览器将 div 的中心放在页面的中心。

如何在 div 中居中 div

有三种方法可以将一个 div 居中到另一个 div 中。使用每种方法，您都可以将 div 水平、垂直或两者同时居中。

使用“位置”、“顶部”、“左侧”和“边距”属性

若要在页面上的 div 内水平和垂直居中，可以使用位置、顶部、左侧和边距属性，只要您知道 div 的宽度和高度即可。

首先，将一个 div 元素包装在 HTML 中的另一个 div 元素中。给内部 div 一个像孩子一样的类，给外部 div 一个像父级一样的类。

在 CSS 中，使用类选择器 .parent 设置外部 div 的高度和宽度。然后将位置属性设置为相对。

使用类选择器 .child，您现在可以设置内部 div 的样式。设置其高度和宽度，然后将其位置设置为绝对值。现在，将顶部和左侧属性都设置为 50%。这告诉浏览器将 div 的左边缘和上边缘与父容器的中心水平和垂直对齐。

最后，将负上边距和左边距设置为子元素高度和宽度的一半。

使用位置、顶部、左侧和转换属性

若要在高度和宽度未知的 div 中水平和垂直居中 div，可以使用转换属性而不是边距属性。您仍将使用 CSS 位置、顶部和左侧属性。

按照上述步骤在 HTML 中创建外部和内部 div。在 CSS 中，以相同的方式设置外部 div 的样式：设置高度和宽度，然后将位置设置为相对位置。

现在，您将以几乎相同的方式设置内部 div 的样式。您可以将其位置设置为绝对，并将顶部和左侧属性设置为 50%。但是，您不会定义宽度或高度属性。

您也不会定义边距属性。相反，你将使用 transform 属性将子 div 从容器的边缘向右向下移动 50%。这可确保子 div 真正在父 div 中居中。

使用弹性框

您可以使用 CSS Flexbox 在 div 中居中显示 div。Flexbox 是一个很好的方法，因为它响应迅速且不需要计算保证金——但需要记住一些额外的步骤。

要使用 Flexbox 水平和垂直居中 div，请先将文档的 HTML 和正文区域的高度设置为 100%。如果您希望父容器占据整个视口，也可以将父容器的高度设置为 100%。对于此演示，我将改为将父容器设置为特定高度。

此外，您需要将父容器定义为 flex 容器。通过将显示属性设置为 flex 来执行此操作。然后，将对齐项和两端对齐内容属性设置为居中。这将告诉浏览器垂直和水平地居中弹性项目（div 中的 div）。

使用 HTML 和 CSS 构建自定义布局。

无论您是想水平、垂直还是在另一个 div 内居中，一些编码知识都可以让您控制和自定义布局。例如，了解边距、位置和挠度属性将使您能够在页面上居中几乎任何 div 或块元素。