CSS Center Tag

什么是 Div 标签以及为什么需要居中 Div？

简而言之，div 是内容分割元素。它是 HTML 中的一个通用块级元素。借助 Div，我们可以将网页分成不同的部分，以便使用 CSS 定位每个部分。

例如，如果我们想在网页中添加一个块引用，那么我们就必须借助 <center> 标签，而不是像其他正文一样左对齐。在这种情况下，我们可以将整个文本包装在 <div> 标签内，然后应用 CSS 属性。完成此操作后，其他剩余部分将不受 CSS 属性的影响。

<div> 和 <span> 标签的使用对初学者 Web 开发人员很有价值。借助 <div> 标签，开发人员可以防止内容超出内容边缘。

如何在 CSS 中居中 Div

在 CSS 中，我们可以通过多种方式利用 div 的居中。在网页上水平居中 div 标签非常容易。但是，在网页上垂直居中 div 标签需要大量工作。让我们讨论这两种方法。

如何水平居中 Div

我们需要遵循一些步骤才能在网页上将 div 标签原始居中。

• 首先，我们必须为 CSS 类名指定“center”。
• 然后，我们必须转到 CSS 文件，然后写 .center 作为 CSS 选择器，然后打开样式括号。
• 然后，我们必须通过百分比或像素设置元素的宽度，即 width: 50% 或 width: 500px。然后，我们将 margin 设置为 auto。借助此，div 标签可以具有自动宽度，并且浏览器会在两侧的边距之间平均分配剩余空间。

示例

输出

如何垂直居中 Div

我们必须遵循以下步骤才能将居中的 div 标签垂直居中。步骤是：

• 首先，我们必须为 CSS 类名指定“center”。
• 然后，我们必须转到 CSS 文件，然后写 .center 作为 CSS 选择器，然后打开样式括号。
• 然后，我们将 position 属性的值设置为 absolute。这样做，它将把它作为正常的文档流。
• 然后，我们将 top 属性设置为 50%。它将告诉浏览器将 div 标签从顶部边缘向下放置 50% 的页面，即在页面上垂直居中。
• 然后，我们必须将 transform 属性设置为 translate(0, -50%)。

注意：如果我们愿意，也可以跳过最后一步。如果这样做，它将不会垂直居中 div 标签。所以，我们需要将 transform 属性定义为最后一步。同时，有很多变换方法。我们可以借助 translate() 沿页面 Y 轴移动 div。

示例

输出

如何同时水平和垂直居中 Div

当网页需要水平和垂直居中 div 标签时，我们必须遵循以下步骤来实现。

• 首先，我们必须为 CSS 类名指定“center”。
• 然后，我们必须转到 CSS 文件，然后写 .center 作为 CSS 选择器，然后打开样式括号。
• 然后，我们将 position 属性的值设置为 absolute。这样做，它将把它作为正常的文档流。
• 然后，我们将 left 和 top 属性设置为 50%。它将告诉浏览器将 div 标签从顶部和边缘向下放置 50% 的页面，即在页面上垂直和水平居中。
• 然后，我们必须将 transform 属性设置为 translate(-50%, -50%)。

示例

输出

如何在 Div 中居中 Div

我们可以在另外一个 div 中创建居中的 div 标签，共有三种方式。这三种方式如下。

1. 使用 Position、Top、Left 和 Margin 属性

我们必须遵循以下程序才能在另一个 div 中创建居中的 div 标签。

• 首先，我们将一个 div 元素包装在另一个 div 元素内部。内部 div 充当子级，外部 div 充当父级。
• 然后，我们必须为 CSS 类名指定“parent”。
• 然后，我们必须为外部 div 设置高度和宽度。然后，我们必须为外部 div 设置 position 属性为 relative。
• 然后，我们必须为另一个 CSS 类名指定“child”。
• 然后，我们必须为内部 div 设置高度和宽度。然后，我们必须为外部 div 设置 position 属性为 absolute。
• 然后，我们将 left 和 top 属性设置为 50%。它将告诉浏览器将 div 标签从顶部和边缘向下放置 50% 的页面，即在页面上垂直和水平居中。
• 然后，我们必须将 transform 属性设置为 translate(-50%, -50%)。

示例

输出

2. 使用 Position、Top、Left 和 Transform 属性

我们还可以借助 transform 属性在 div 标签内创建 div 标签。要实现这一点，我们必须遵循以下步骤。

• 首先，我们将一个 div 元素包装在另一个 div 元素内部。内部 div 充当子级，外部 div 充当父级。
• 然后，我们必须为 CSS 类名指定“parent”。
• 然后，我们必须为外部 div 设置高度和宽度。然后，我们必须为外部 div 设置 position 属性为 relative。
• 然后，我们必须为另一个 CSS 类名指定“child”。
• 然后，我们必须为内部 div 设置高度和宽度。然后，我们必须为外部 div 设置 position 属性为 absolute。
• 然后，我们将 left 和 top 属性设置为 50%。它将告诉浏览器将 div 标签从顶部和边缘向下放置 50% 的页面，即在页面上垂直和水平居中。
• 然后，我们必须将 transform 属性设置为 translate(-50%, -50%)。

示例

输出

3. 使用 Flexbox

我们还可以借助 flexbox 属性来居中内部 div 标签。使用 Flexbox 是创建弹性网页的好方法。要实现这一点，我们必须遵循以下步骤。

• 首先，我们必须转到 CSS 文件，然后找到 html 和 body 选择器。然后，在该选择器的花括号内，我们将两个属性的高度都设置为 100%。
• 首先，我们将一个 div 元素包装在另一个 div 元素内部。内部 div 充当子级，外部 div 充当父级。
• 然后，我们必须为 CSS 类名指定“parent”。
• 然后，我们将 display 属性设置为 flex。这将把父容器转换为 flex 容器。
• 在那里，r 必须将 align-items 和 justify-content 属性设置为 center。
• 然后，我们必须为另一个 CSS 类名指定“child”。
• 然后，我们必须设置内部 div 的高度和宽度。

示例

输出

如何在 Div 中居中文本

借助 CSS，我们可以通过多种方式居中文本。我们可以通过 text-align 来实现。我们也可以通过 line height 和 vertical-align 属性来做到这一点。我们可以通过以下步骤来做到这一点。

如何在 Div 中水平居中文本

我们可以通过两个步骤在 div 中水平居中文本。

1. 使用 Text-Align 属性

要实现这一点，我们必须遵循以下步骤。

• 首先，我们必须将 CSS 选择器名称指定为 center。
• 然后，我们将 text-align 设置为 center。

示例

输出

2. 使用 Justify-Content 属性

要实现这一点，我们必须遵循以下步骤。

• 首先，我们必须将 CSS 选择器名称指定为 center。
• 然后，我们将 display 属性设置为 flex，
• 然后，我们将 justified content 设置为 center。

示例

输出

如何在 Div 中垂直居中文本

将 div 标签内的文本垂直居中可能具有挑战性。我们可以通过以下方法来实现。

1. 使用 Padding 属性

将文本垂直居中在 div 标签内的方法之一是借助 padding 属性。padding 属性接受两个值。我们必须在第一个值中设置顶部和底部填充。同样，在第二个值中，我们必须设置左侧和右侧填充。要实现这一点，我们必须执行

以下步骤。

• 首先，我们必须为 div 标签提供类名，即 center。
• 然后，我们必须在开始和结束括号中编写 CSS 选择器和一些属性。
• 然后，我们将 padding 属性设置为 50px 0。

示例

输出

3. 使用 Line-Height 属性

我们还可以借助 line-height 属性在 div 标签内创建垂直文本。要实现这一点，我们必须遵循以下步骤。

• 首先，我们必须为 div 标签提供类名，即 center。
• 然后，我们必须在开始和结束括号中编写 CSS 选择器和一些属性。
• 我们必须为 height 和 line height 属性提供相同的大小。
• 然后，我们必须创建 p 标签的 CSS 选择器。
• 然后，我们将 display 属性设置为 inline block。
• 然后，我们必须将 line height 设置为 normal，并将 vertical alignment 设置为 middle。

示例

输出

3. 使用 Align-Items 属性

如果 w 借助 display 属性将 div 定义为 flex 容器，那么我们也必须借助 align item，它包含 center 值。要实现这一点，我们必须遵循以下步骤。

• 首先，我们必须进入 CSS 文件，然后为 CSS 类名指定 center。
• 我们必须在 CSS 代码的开始和结束括号内提供 CSS 属性。
• 然后，我们将 display 属性设置为 flex，这使得 div 容器成为一个 flex 容器。
• 然后，我们将 aligned item 设置为 center。

示例

输出