使用 CSS 居中 HTML div

在 HTML 中将 div 居中是非常具有挑战性的，尤其是水平和垂直居中。但在这篇文章中我会帮助你！

代码示例及说明：

假设有一个类为 myDiv 的 div：

<div class="myDiv">hello dev</div>

现在让我们，
使用 CSS 水平居中：
要使该 div 水平居中，我们可以使用以下 CSS 代码：

.myDiv {
  padding: 0 100%;
}

在此 CSS 代码中 padding: 0 100%;将 X 轴填充设置为 100%（全屏宽度）以使 div 水平居中。

使用 CSS 垂直居中：
要使该 div 垂直居中，我们可以使用以下 CSS 代码：

.myDiv {
  padding: 100% 0;
}

在此 CSS 代码中填充：100% 0;将 Y 轴填充设置为 100%（全屏高度）以使 div 垂直居中。

使用 CSS 水平和垂直居中：
现在让我们使用 CSS 将其垂直和水平居中。
让我们使用这段代码：

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

在此代码中显示：flex;将显示模式设置为 Flexbox，这对于其工作非常重要。然后 justify-content: center;将内容对齐并对齐项目：中心；将项目居中对齐。他们一起工作使 div 水平居中。最后填充：100%0；向 Y 轴（全屏高度）添加 100% 填充，以使 div 像以前一样垂直居中。将所有内容放在一起，它们将 div 垂直和水平居中。

这都是关于使用 CSS 居中 div，了解更多

使用 TailwindCSS：

是的，我不能在不告诉你使用 TailwindCSS 的情况下结束这篇文章。这是我最喜欢的框架，因为它对初学者帮助很大。

让我们使用 TailwindCSS 将 div 居中，
水平：
使用 TailwindCSS 使 div 水平居中可以通过使用以下代码来完成：

<div class="flex items-center">hello dev</div>

在此代码中，TailwindCSS 类 flex 将显示设置为 flexbox，并且 items-center 将项目水平居中。

垂直：
使用 TailwindCSS 使 div 垂直居中可以通过使用以下代码来完成：

<div class="h-screen flex items-center">hello dev</div>

在此代码中，TailwindCSS 类 h-screen 使 div 使用全屏高度，flex 类将显示设置为 Flexbox，而 items-center 将项目居中。

垂直和水平：

<div class="h-screen flex items-center justify-center">hello dev</div>

在此代码中，h-screen 类使 div 使用全屏高度，flex 类将显示设置为 Flexbox，items-center 将项目居中，而 justify-center 将项目对齐到中心。将所有内容放在一起，使 div 垂直和水平居中。

这就是使用 TailwindCSS 居中 div 的全部内容，了解更多

结论：

居中 div 可以使网站中的元素脱颖而出，这就是使 HTML div 居中的方式。

一定要多练习，不要完全依赖记忆属性。祝你有美好的一天:)

大家好，我是一名学生，我喜欢编程。如果我的文章对您有帮助并且您想捐款，那么谢谢，因为它将支持我的教育并帮助我实现我的目标！ 捐赠 Nabir14

以上是使用 CSS 居中 HTML div的详细内容。更多信息请关注PHP中文网其他相关文章！