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

代码示例及说明：

假设有一个类为 myDiv 的 div:

hello dev

现在让我们，
使用 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 水平居中可以通过使用以下代码来完成：

hello dev

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

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

hello dev

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

垂直和水平：

hello dev

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

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

结论：

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

确保练习而不是完全依赖于记忆属性。祝你今天过得愉快 ：）

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