笔记本电脑演示了如何在 CSS 中将 div 水平和垂直居中
立即下载：如何在
人工智能领域获得开发人员职位 [免费清单]
好消息：我来这里是为了帮助您发现在 CSS 中居中元素的多种方法。我将带您了 手机号码列表 解以下概念，当您读完本文时，您将能够快速了解如何垂直和水平居中 div，甚至更多。让我们开始吧。
什么是 div 以及为什么要将 div 置于中心？
如何在 CSS 中将 Div 居中
如何使 Div 水平居中
如何使 Div 垂直居中
如何使 Div 水平和垂直居中
如何将 Div 置于 Div 内并居中
如何在 CSS 中将文本置于 Div 中央
如何使 Div 中的文本水平居中
如何使 Div 中的文本垂直居中
如何在人工智能领域获得开发人员的职位
一份免费的清单可以帮助您在以软件开发人员和 YouTube 创作者技术与 Tim 为特色的竞争中脱颖而出。
关于如何建立投资组合的专家建议
要学习的顶级编程语言
简历构建和面试技巧
加强沟通技巧的资源
免费下载
了解更多
什么是 div 以及为什么要将 div 置于中心？
许多初级程序员在构建布局时遇到的一个问题是如何排列和设置页面上元素的样式。您必须问自己：您希望元素重叠还是元素之间留有空隙？您希望页面上的某些文本居中，其余文本左对齐吗？您使用的是纯 CSS 还是框架？这有很多问题。幸运的是，div 可以提供帮助。
div （内容划分元素的缩写）是一种通用的块级 HTML 元素。顾名思义，div 可以将您的网页划分为更易于理解的部分。通过这样做，您可以使用 CSS 来定位它们。
我来举个例子。假设你想在你的博客文章中加入一个引用块，并且你想让它居中，而不是像其他正文那样保持左对齐。
在这种情况下，我建议您将文本包装在 div 元素中。然后，将 CSS 应用于该元素。这可确保页面的其余部分保持一致 - 它仅将样式应用于您已识别的元素。很酷，对吧？
对于初学者来说，了解如何将 div 和 div 中的文本居中是一项宝贵的技能。通过学习这一点，您可以防止内容延伸到边缘并与其他元素重叠。正如您可能亲身经历过的那样，这可能会导致问题。
我是否已经说服了你，弄清楚如何将 div（或 div 中的文本）居中是初级程序员必须掌握的一项基本技能？我认为是这样。现在，我将指导你如何做到这一点。
如何在 CSS 中将 Div 居中
在 CSS 中，有几种方法可以将 div 居中。是的，可以将 div 垂直和水平居中 — — 尽管垂直居中有点棘手。
下面我将向您介绍这两种方法。然后，我将分享如何垂直和水平居中 div — 甚至将一个 div 置于另一个 div 内。（剧透：这并不像听起来那么难。）
如何使 Div 水平居中
要将 div 在页面上水平居中：
为 div 指定一个CSS 类，如center。
在您的 CSS 代码 CSS 选择器并打开样式括号。
按百分比或像素设置元素的宽度，即宽度：50%；或宽度：500px。
将margin属性设置为auto。这样，div 将占据 CSS 中指定的任何宽度，并且浏览器将剩余空间均匀地分配给两侧的边距。
让我们看一个CSS 盒子模型的简单示例。假设您要创建一个 div，其中包含一个简短的段落。在这里，我为 div 赋予了 center 类，并分配了边距值auto。
亲自尝试
下面的代码模块是可编辑的。在 HTML 和 CSS 选项卡之间切换，编辑代码，然后单击右下角的重新运行。
水平居中 Div 的输出
您是否注意到边距与填充不同？我会使用填充在 div 的边框和 div 内部的段落之间创建空间，在本例中，段落是内联元素。如果您想了解有关这两个属性之间差异的更多信息，我鼓励您浏览这篇文章：CSS 边距与填充：有什么区别？
特色资源：CSS 和 HTML 入门指南
html-css
下载免费 CSS 指南
如何使 Div 垂直居中
您已经很好地学会了如何将 div 水平居中。现在，我将向您展示如何垂直居中。这有点困难，但并非不可能。
要将 div 在页面上垂直居中，您可以使用CSS position 属性、top属性和transform属性。操作方法如下：
为 div 指定一个CSS 类，如center。
在您的 CSS 代码中， CSS 选择器并打开样式括号。
将div 的位置设置为绝对位置，以便它脱离正常文档流。
将top属性设置为50%。这告诉浏览器将 div 的顶部边缘与页面的垂直中心对齐（即页面下方的 50%）。
然后，将transform属性设置为Translation(0, -50%)。
我本可以跳过最后一步，但问题是：如果将 div 的顶部边缘排列在页面中间，则不会使 div 居中。我需要定义最后一个属性，即transform属性。
虽然有几种不同的转换方法，但我想使用translate（）方法沿页面的Y轴移动div。我想将div从当前位置向上移动50%。这将告诉浏览器将div的中心放在页面的垂直中心。