如何使用 CSS 将 DIV 居中 [5 种快速方法]

如果您曾经开始利用自己的编码技能构建项目，那么您可能面临过将页面上的元素居中的挑战。问题“如何使 div 居中？”几乎每个 Web 开发人员都会遇到这种情况。

本博客将探讨使用 CSS 使元素居中的简单方法。从基本方法到现代技术，我们将介绍如何水平和垂直居中元素。每种方法都将通过简单的示例进行解释，以便您可以准确地了解其工作原理。

无论您是 CSS 新手还是需要快速复习，本指南都将帮助您掌握在网页上居中元素的艺术。让我们开始吧！

什么是 DIV？为什么要考虑将 DIV 居中？

div或分区是一种基本的 HTML 元素，充当对网页上其他元素进行分组的容器。

只需将其想象为一个盒子，您可以使用它来组织文本、图像或其他元素等内容。 Div 对于网页内容的结构和样式至关重要，可以使网页更有条理、更具视觉吸引力。

为什么要考虑将 Div 居中？

从用户体验的角度来看，将 div 居中非常重要。但这对于 Web 开发人员来说可能是一个样式挑战，因为它可以极大地改善网页的外观和布局。

这就是为什么居中很重要：

• 提高可读性和美观性：将内容居中可以使其在视觉上更具吸引力，并且更容易让用户专注于关键元素，例如按钮、表单或图像。
• 响应式设计：当您的布局适应不同的屏幕尺寸时，居中有助于确保您的内容保持平衡，并且在从台式机到智能手机的所有设备上看起来都不错。
• 突出显示关键元素：居中是吸引人们注意重要部分或号召性用语（例如“注册”按钮或特色图像）的好方法。
• 更干净、更专业的布局：居中布局通常看起来更干净、更精致，给您的网站带来更专业的感觉。

如何使用 CSS 将 DIV 居中（不同方法）

将 div 居中可以通过几种不同的方式来完成，具体取决于您想要将其水平居中、垂直居中还是两者都居中。以下是一些简单的方法：

以下是使用 CSS 使 div 居中的一些最流行的方法：

方法 1：如何使用自动边距使 Div 居中

如果您是网页设计新手，将网页上的元素居中可能看起来很棘手，但一旦掌握了窍门，它就非常简单了。将div水平居中的一种经典且简单的方法是使用自动边距。让我们一步一步地分解它。

1. 你需要知道什么

要使用自动边距水平居中div ，请按照下列步骤操作：

• 1. 限制宽度：首先，确保您的div不会占据其容器的整个宽度。默认情况下， div会展开以填充整个宽度。要将其居中，您需要设置最大宽度。

• 2.使用自动边距：左右两侧的自动边距会将div推到中心。

这是一个简单的例子：

html

<div class="centered-div">This is a centered div</div>

CSS

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2、为什么使用max-width: fit-content; ？

max-width: fit-content;规则确保div仅根据其内容占用所需的宽度。如果您使用固定宽度（例如200px ，则当容器太窄时div可能会溢出。 fit-content动态调整div大小以适应其内容。

3. 自动保证金如何运作？

自动边距就像饥饿的河马，均匀地吞噬两侧的额外空间以使 div 居中。此方法会针对不同的语言自动调整，并且非常适合将单个元素居中而不影响其他元素。

当两个边距都设置为auto时，它们平均共享额外的空间，使div居中。

4. 使用现代快捷方式： margin-inline

您可以使用margin-inline属性来获得更简洁的方法，而不是单独设置margin-left和margin-right ：

.centered-div {

最大宽度：适合内容；

内联边距：自动； /* 自动将左右边距设置为auto */

}

方法 2：如何使用 Flexbox 将 DIV 居中

Flexbox 可以轻松地将项目在两个方向上居中。以下是使用 Flexbox 将单个元素居中的方法：

。容器 {

显示：柔性；

调整内容：居中； /* 水平居中 */

对齐项目：居中； /* 垂直居中 */

}

在此示例中， .container设置为使用 Flexbox。 justify-content: center属性使项目水平居中，而align-items: center使项目垂直居中。

需要考虑的一些要点：

水平和垂直居中： Flexbox 可以轻松地将项目水平和垂直居中，即使它们溢出了容器。

多个项目：Flexbox 也可以很好地处理多个项目。您可以使用flex-direction: row将项目堆叠在行中，或flex-direction : column 进行垂直堆叠。添加gap可以调整项目之间的间距。

这种方法非常灵活，常用于各种布局中的居中元素。

方法 3：如何使 DIV 在视口中居中

当您想要将某个元素（例如弹出窗口或横幅）置于屏幕（视口）中间时，可以使用 CSS 定位。这是一个简单的方法：

1. 固定位置的基本居中

要将元素水平和垂直居中，请使用以下步骤：

• 将位置设置为固定：

– position: fixed;使元素在滚动时保持在原位。这就像将元素粘贴到屏幕上一样。

• 使用插图来锚定：

– inset: 0px;是将元素与视口边缘（上、右、下、左）的距离设置为 0 像素的快捷方式。这会拉伸元素以填充整个屏幕。

• 约束尺寸：

– 设置width和height来定义元素的大小。

– 使用max-width和max-height确保它不会在较小的屏幕上溢出。

• 具有自动边距的中心： – margin: auto;使元素居中。它均匀地划分了周围的额外空间，确保它保持居中。

示例代码：

。元素 {

位置：固定；

插图：0； /* 将元素锚定到所有边 */

宽度：12rem； /* 设置固定宽度 */

高度：5rem； /* 设置固定高度 */

最大宽度：100vw； /* 确保它不会溢出视口宽度 */

最大高度：100dvh； /* 确保它不会溢出视口高度 */

保证金：自动； /* 使元素居中 */

}

2. 仅水平居中

如果您只想将元素水平居中（例如，底部的 cookie 横幅），请执行以下操作：

• 位置固定：

– position: fixed;将元素保持在适当的位置。

• 锚定到边缘：

– 使用left: 0; right: 0;将其从一侧水平拉伸到另一侧。

– 设置bottom: 8px;从底部边缘定位它。

• 约束和中心：

– 设置固定宽度。

– 使用margin-inline: auto;将其水平居中。

示例代码：

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. 将未知尺寸的元素居中

如果您不知道元素的大小，但仍希望它居中：

• 使用适合内容：

– width: fit-content;和height: fit-content;允许元素围绕其内容收缩。

• 应用居中：

– 结合position: fixed;和margin: auto;将其居中。

示例代码：

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

使用这些方法，您可以轻松地将元素置于视口中，无论其大小如何。

方法 4：如何使用 CSS 网格将 DIV 居中

CSS 网格是布局设计的强大工具，对于居中元素尤其方便。以下是如何使用 CSS 网格轻松地将某些内容水平和垂直居中：

1. 将单个元素居中

要将元素在其容器中居中，您可以使用 CSS 网格进行简单设置：

• 设置网格显示：

– display: grid;将容器变成网格。

• 使用地点内容：

– place-content: center;是使内容水平和垂直居中的快捷方式。它将justify-content （水平）和align-content （垂直）设置为center 。

示例代码：

css

。容器 {

显示：网格；

地点内容：中心； /* 内容水平和垂直居中 */

}

这使得元素位于其容器的中间，无论其大小如何。

2. 与Flexbox的区别

虽然 CSS Grid 可以将项目居中，但它的行为与 Flexbox 不同：

– Flexbox：根据项目的大小和容器大小将项目居中。

– CSS 网格：根据网格单元的大小将项目居中，如果未定义网格单元的大小，这可能会很棘手。

带有百分比的网格中的示例代码：

css

。容器 {

显示：网格；

地点内容：中心；

}

。元素 {

宽度：50%； /* 宽度为网格单元的50% */

高度：50%； /* 高度为网格单元的50% */

}

如果未指定网格单元格大小，则元素最终可能会小于预期。对于基本居中来说，Flexbox 通常更简单。

3. 多个元素居中

CSS Grid 还可以处理同一单元格中的多个元素：

• 将多个元素分配给同一单元格：

– 使用grid-row和grid-column将项目放置在同一网格单元中。

• 单元格内的中心项目：

– 添加place-items: center;将项目置于网格单元的中心。

示例代码：

css

。容器 {

显示：网格；

地点内容：中心； /* 使网格单元居中 */

地点项目：中心； /* 将单元格中的项目居中 */

}

。元素 {

网格行：1；

网格列：1； /* 所有元素都放在同一个单元格中 */

}

此设置将多个项目堆叠在容器的中心，即使它们具有不同的尺寸。

要点

– CSS 网格非常适合复杂的布局以及当您需要精确控制放置时。

– 对于简单的居中任务来说， Flexbox通常更简单。

有了这些基础知识，您就可以使用 CSS 网格在各种场景中将单个和多个元素居中。

方法 5：如何在 CSS 中使文本居中

文本居中与图像或 div 等其他元素居中有点不同。这是完成此操作的简单方法：

将文本块居中

当您想要将容器内的文本块（如 div 中的段落）居中时，可以使用text-align属性。当文本位于块级元素（例如div 、 p或h1 ）内时，此方法效果最佳。

操作方法如下：

css

。容器 {

文本对齐：居中；

}

此代码告诉浏览器将文本在容器内居中。如果您还想让容器本身居中，您可以使用 Flexbox 或 Grid 来实现：

css

。容器 {

显示：柔性；

调整内容：居中；

对齐项目：居中；

高度：100vh； /* 使容器全高以垂直居中 */

}

Flexbox 和网格怎么样？

Flexbox 和 Grid 非常适合将整个容器居中，但它们不会使这些容器中的文本居中。如果您使用 Flexbox 或 Grid 将段落居中，它会将文本块居中，而不是其中的各个行或字符居中。

使用 Flexbox 使文本居中

如果您使用 Flexbox 将段落居中，如下所示：

css

。容器 {

显示：柔性；

调整内容：居中；

对齐项目：居中；

高度：100vh；

}

它将整个段落置于容器内的中心。但要将文本本身在该段落中居中，您还需要text-align: center; 。

未来的 CSS 特性

CSS 有了令人兴奋的发展！即将推出的新功能将使居中变得更加容易。目前，使用 Flexbox 或 Grid 以及text-align: center;是最好的处理方法。

这种简单的方法有助于让您的文本看起来美观且居中，无论它位于页面上的哪个位置！

但考虑到上述所有方法，您可能会困惑哪一种最适合不同的情况。如果是这样的话，请查看下面的结论。

结论

在本博客中，您学习了如何使用各种工具（例如 Flexbox 和自动边距）将 DIV 元素水平居中、垂直居中以及在页面中心居中。这些工具都有自己的优点和使用场景。为了帮助您解决问题，以下是一些常见的用例：

• 自动边距：使用此功能可以实现简单的水平居中。
• Flexbox：最适合在两个方向上居中以及处理一行或一列项目时。
• 视口居中：非常适合需要在屏幕上居中的弹出窗口或元素。
• CSS 网格：非常适合复杂布局以及需要将行和列居中时。

如果您对这篇文章有任何疑问或疑问，请在下面的评论部分告诉我们：

拉胡尔

Rahul Kumar 是一位网络爱好者和内容策略师，专门从事 WordPress 和网络托管。凭借多年的经验和对了解最新行业趋势的承诺，他制定了有效的在线策略来增加流量、提高参与度并提高转化率。拉胡尔对细节的关注以及制作引人入胜的内容的能力使他成为任何希望提高其在线形象的品牌的宝贵资产。