CSS中的垂直和水平居中
大家好，和 Usetech 的前端开发人员 Kirill Mylnikov 在一起。
今天，我想谈谈CSS（Cascading Style Sheets）的垂直和水平居中。网络上有很多关于这个主题的文章，但我想通过示例强调所有类型的水平和垂直居中。
这个话题对于那些简单地弥补或从事成熟的前端开发的人来说非常受欢迎（毕竟，我们总是需要集中一些东西）。
有很多方法可以使元素居中，在某些情况下，每种方法都有自己的优点。
在本文中，我将分析以下几种居中类型：
— 水平居中；
— 垂直居中；
— 水平和垂直居中。
开始吧。
水平居中
1.该属性只适用于内联元素，只要指定text-align:center到父元素即可。
2. text-align: center 属性不再适合居中块元素。有一个简单的通用属性margin：0 auto。我们只需要知道块的宽度，margin 0 auto 属性会设置以下值：上下都为0，边上的尺寸会自动设置，块元素会站在中央。
3. 通过边距居中当然是好的，但是还有一个灵活的显示：flex 属性。我们需要将此属性设置为父 display: flex 和 justify-content: center。
justify-content: center-居中项目。
4. 下一个属性是 display: grid。
该算法与 display: flex: 将此属性设置为父级并指定 justify-content: center 一样。
今天，grid 和 flexbox 属性在 Web 开发中非常流行。接下来，我将向您展示如何使用这些属性使元素沿水平轴和垂直轴居中。
5. 现在我将展示一个不寻常的 text-align + display: inline-block 属性组合。
是的，如果需要，您还可以将一个或多个块元素居中。在第一个例子中，我说过 text-align 属性只适用于内联元素，但是如果我们将属性指定给块元素显示：inline-block，那么它将变成块小写。这意味着 text-align 属性可用，并且元素居中。
一个小提示： display: inline-block 不需要设置为父块，而是设置为我们要应用此属性的每个块。
我们已经处理了水平居中，现在我们将继续进行垂直居中。
垂直居中
1. 该属性适用于表格——即vertical-align:middle。
使用这种类型的定心时，请考虑以下条件：
— 我们规定 display: table 给父级；
— 必须为子元素分配 display: table-cell 才能使元素成为单元格；
— 我们将vertical-align 属性写入单元格：middle，就是这样，元素变为中心。
2.有这样一种情况，当居中元素的高度已知，父元素的高度可以是任意的。在这里我们可以应用绝对定位。现在让我们弄清楚需要做什么。
— 将孩子设置为 position: absolute 并省略 top: 50%；
— 由于子元素可以有任何高度，我们必须将这个高度除以 2，并将结果注册到 margin-top 为负值。
3. 当我们需要将已知高度的行居中时，我们可以简单地指定一个 line-height 并指定相同的高度。
4. 我们使用内部缩进（填充）居中：
— 元素必须为小写；
— 该项目必须放置在单行中。
5.另一种使用vertical-align的垂直居中方法。我在上面考虑了这个属性，但是使用了表格的例子。此外，该属性还适用于 display: inline/inline-block。简而言之，使用内联元素。
您必须考虑以下条件：
— 必须知道父级的高度，并且没有居中元素；
— line-height 属性是继承的，所以你需要知道正确的行高。
6. 让我们找出居中元素的高度未知的另一种情况。在这里，绝对定位将再次帮助我们。让我们详细描述我们必须做什么。
— 指定位置：绝对子元素并省略top：50%；
— 然后在我们的元素中编写 transform: translate (-50%) 属性，就是这样，我们的元素在中心。
7. 使用 display: flex 属性垂直居中。您可以使用此属性将要素垂直居中。为此，请将父级设置为 display: flex, flex-direction: column, justify-content: center。
8. 如何使用 display: grid 垂直居中。在垂直居中的情况下，这里的一切都比使用 flexbox 简单得多。我们需要为父级指定以下属性：display:grid 和 align-items:center。
9. 下一种情况是子元素的高度未知，父元素未知的情况。要设置居中，我们需要：
— 将子元素设置为 position: absolute, top: 0, bottom: 0，因此它将拉伸外部块的整个高度；
— 我们将值 margin: auto 0 设置为内部块的垂直缩进的子元素。
10. 垂直居中的最后一种方式：如果父子的高度未知，那么前面的伪元素会帮到我们。
— 给父级，指定之前的伪元素，写 display:inline-block 并表示高度为 100%。
— 因此，我们占据了整个允许的高度；
— 使用vertical-align: middle 将居中的块与中心对齐。
水平和垂直居中
是时候将元素垂直和水平居中了。让我们看一下具体的例子。
1.如果有元素的高度和宽度未知的情况，您应该执行以下操作：
— 指定位置：绝对、顶部：50%、左侧：50% 和变换：将 (-50%, -50%) 属性转换为子元素。
2. 我们回到 flexbox，它对我们的帮助无与伦比。我们需要知道高度并设置以下属性： display flex;对齐内容：居中，对齐项目：居中。
3. Grid 也不是静止不动的：属性几乎相同，但我们分别设置了 display: grid 而不是 flex。在使用网格之前，请在浏览器中寻找对这个属性的支持。
4、有些情况下元素的宽高是固定的，为此我们需要：
— 负值缩进；
— 设置 position: absolute 的值 top: 50%, left: 50% this 并居中父元素。
5. 如果我们想居中一个内联、内联块，那么我们需要vertical-align 属性。为此，您需要在父元素之前指定伪元素（我在上面展示了这个示例），但在这种情况下，我们必须使元素在两个轴上居中 - 垂直和水平。为此，我们必须将 text-align: center 指定为父级。
6. 我之前讲过如何使表格中的元素居中，但使用垂直居中的示例。在垂直和水平居中的情况下，您可以返回该步骤并在添加中为单元格指定 text-align: center 属性。
至此，我们整理了CSS中所有的居中方式。每种方法都有其独特的方式，您需要根据情况选择它们。您使用哪种方式？
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/17422/02150600
标签：居中,align,元素,垂直,display,CSS,属性 From： https://www.cnblogs.com/amboke/p/16660170.html