作为一名web开发人员，有时将 div 居中感觉就像是地球上最艰难的工作之一。在本文中，您将学习 10 种不同的居中方法。我们将探讨如何使用 CSS 位置属性、CSS 弹性框和 CSS 网格将 div 居中。读完这篇文章后，我相信你会开始像专业人士一样居中。

　　如何居中 aDiv

　　在本教程中，我将对下面讨论的所有 10 种方法使用相同的 HTML。HTML 中只包含一个父项和一个子项。divdiv

　　本文的主要目的是围绕其父级将内部中心化。我只会更改CSS文件，但您将能够看到所有10种不同的方法都生效。div

　　主 HTML 文件如下所示：

　　仅使用基本样式，如以下行所示：

　　我们将得到这样的东西：

　　基本的 HTML 和 CSS 样式为我们提供了什么。

　　我们只是做一个父母，并给它一个和一个，和一个。div width height 400px color #f55353

　　同样，我们在里面创造了一个孩子，给它一个和一个，给它一个。div width height 100px color #feb139

　　本文的最终目标是进行此转换：

　　如何使用 CSS 属性将 Div 居中position

　　1. 如何使用位置：相对、绝对和顶部、左侧偏移值

　　CSS 中的位置属性设置元素在页面上的定位方式。位置属性的默认值为 。位置属性采用的其他值为 、 和 。static relative absolute fixed sticky

　　现在，当我们给一个DOM元素一个，它相对于整个页面变得绝对。如果我们想将 围绕整个页面居中，这将非常有用。position: absolutediv

　　另一方面，将父元素设置为 ，使子元素(带有 )相对于父元素而不是整个页面是绝对的。position: relativeposition: absolute

　　在上面的例子中，我们就是这样做的。我们给父元素一个，给子元素一个。position: relative position: absolute

　　除了位置属性，我们还可以指定其他四个属性，即 、 ，然后确定元素的最终位置/位置。top right bottom left

　　和 指定元素的垂直定位，其中 as 并指定水平定位。top bottom left right

　　2.如何使用位置：相对和绝对，顶部，左侧，右侧和底部偏移值和边距：自动

　　继续我们从上面第1点开始的仓位知识，我们在这里使用CSS中的属性。 允许浏览器为子元素选择合适的边距。marginmargin: auto

　　在大多数情况下，它允许子元素采用其指定的宽度，并且浏览器在左右边距对或上边距和下边距对之间或两者之间平均分配剩余空间。

　　如果我们只提到 和 ，它将子元素垂直居中。top: 0bottom: 0margin: auto

　　类似地，如果我们只提到 和 ，那么它将使子级水平居中。left: 0right: 0margin: auto

　　如果我们提到上面代码块中所示的所有属性，那么我们就会得到一个水平和垂直方向的完美居中的div。

　　如何使用 CSS 弹性框将 Div 居中

　　3. 如何使用弹性框、对齐内容和对齐项目

　　上述两种方法基于更经典的页面元素对齐方法。现代方法利用 Flexbox(用于单向布局建模)和网格布局(用于更复杂的二维布局建模)属性。

　　让我们看看弹性框方法：

　　Flexbox不仅仅是一个单一的属性，而是一个由一组属性组成的模块。其中一些属性用于容器(即父容器)，而另一些则用于其中的子元素。

　　下图显示了用于与 Flexbox 相关的父元素和子元素的属性列表。

　　现在无法涵盖本文中的所有属性。相反，让我们来看看我们在本文中使用的一些属性。

　　如上所述，Flexbox 模型中有两个不同的实体，即父容器和子元素。

　　该属性将容器定义为弹性容器。 是另一个父容器属性，可以采用四个值(默认值)、和 。display: flex flex-direction row row-reverse column column-reverse

　　使用Flexbox时，我们需要考虑两个不同的轴，即主轴和十字轴。

　　对于 is 或 的情况，水平轴是主轴，垂直轴是交叉轴。flex-direction row row-reverse

　　同样，当 是 或 时，垂直轴是主轴，水平轴是交叉轴。请参阅下图，以获得视觉清晰度：flex-direction column column-reverse

　　父容器的属性定义其子容器沿主轴的对齐方式。因此，设置其所有子元素相对于主轴的中心对齐。justify-content justify-content: center

　　同样，父容器的属性定义其子容器沿交叉轴的对齐方式。因此，设置其所有子元素相对于十字轴的中心对齐。align-items align-items: center

　　因此，下面的代码块将在垂直和水平方向上将我们的子元素完全对齐在父元素的中心。

　　在此方法中，我们不需要为子元素显式指定任何内容。，然后处理父组件中的所有内容。display: flex justify-contentalign-items

　　4. 如何使用弹性框、对齐内容和对齐自我

　　此方法只是上述方法的替代方法，并且与它非常相似。

　　但是，为了代替使用属性(在父容器属性中)，它设置所有子元素相对于交叉轴的对齐方式，我们使用(在子元素中)来设置各个柔性项目在交叉轴上的对齐方式。align-items align-self

　　5. 如何使用弹性框和保证金：自动

　　弹性盒为我们提供了非常强大的对齐和空间分配功能。同样如上所述，让浏览器为子元素选择合适的边距。margin: auto

　　在大多数情况下，它允许子元素采用其指定的宽度，并且浏览器在左边距对或上边距和下边距对之间或两者之间平均分配剩余空间。

　　这意味着将父容器设置为 并为子容器提供 a，浏览器可以沿垂直和水平方向均匀分布剩余空间。flexmargin: auto

　　如何使用 CSS 网格将 Div 居中

　　6. 如何使用网格、对齐内容和对齐项

　　CSS 网格或仅网格用于二维布局建模，而 Flexbox 则用于一维建模。

　　与 Flexbox 类似，我们有网格容器或父容器以及网格项或子项的概念。

　　下图列出了可用于父项和子项的所有属性。由于 CSS Grid 本身就是一个巨大的主题，因此本文的讨论范围不在于每个属性。因此，让我们讨论一下我们在本文中使用的属性。

　　display: grid启动元素以成为网格容器。

　　justify-items并分别沿内联(行)轴和块(列)轴对齐网格内的项目。align-items

　　另一方面，如果网格的总大小小于网格容器(如果所有网格项的大小都使用非柔性单位(如 px)进行调整，则可能会发生这种情况)，在这种情况下，我们可以使用 和 来控制网格容器中网格的对齐方式。justify-contentalign-content

　　justify-content并分别沿内联(行)轴和块(列)轴对齐网格。align-content

　　至于我们的情况，只有一个网格单元格，里面只有一个子元素，所以我们可以使用或以及或互换并获得相同的结果。justify-contentjustify-itemsalign-contentalign-items

　　7. 如何使用网格和放置项

　　可用于在同一声明中同时设置 和 属性。类似地设置两者，并且是相同的声明。place-items align-items justify-itemsplace-content justify-conten talign-content

　　如上所述，在此用例中，我们可以使用 或 以及 或 互换。以同样的方式，我们也可以使用以及互换并获得相同的结果(特别是对于这个用例。对于任何其他用例，我们需要分析应该使用哪个属性)。justify-content justify-items align-content align-itemsplace-items place-content

　　8. 如何使用网格、对齐自我和证明自我

　　与 Flexbox 类似，网格还支持使用 和 属性(要在子元素中指定的属性)对齐单个网格项。align-self justify-self

　　justify-self沿内联(行)轴对齐网格单元格内的网格项，而沿块(列)轴对齐网格单元格内的网格项。align-self

　　9. 如何使用网格和放置自

　　该属性在单个声明中同时设置 和 属性。因此，指定一个子元素以垂直和水平地使子元素居中。place-selfjustify-selfalign-selfplace-self: center

　　10. 如何使用网格和边距：自动

　　与弹性盒类似，网格还为我们提供了强大的对齐和空间分配功能。

　　如第 5 点所示，我们可以使用 Grid 而不是使用 Flexbox 执行类似的过程，如果我们对齐子元素，我们将得到相同的结果。margin: auto

　　这是结果

　　正如预期的那样，遵循上述任何一种方法都将导致这种情况：

　　总结

　　在本文中，我们了解了如何使用 10 种不同的方法将 div 居中。这些方法是：

　　使用位置：相对、绝对和顶部、左偏移值

　　使用位置：相对和绝对，顶部，左侧，右侧和底部偏移值和边距：自动

　　使用弹性框、对齐内容和对齐项目

　　使用弹性框，对齐内容并对齐自我

　　使用弹性框和边距：自动

　　使用网格、对齐内容和对齐项

　　使用网格和放置项

　　使用网格，对齐自我和对齐自我

　　使用网格和位置自

　　使用网格和边距：自动

　　我们还研究了所有这些属性(如 、 等)的含义，以及我们如何将它们中的一些组合在一起以将 div 居中。justify-content align-items position