居中对齐终极指南 - CSS

本博客将讨论 6 种可用于居中对齐元素的技巧（按最佳实践的顺序排列），并介绍每种技巧的具体使用时机。这里，居中对齐是指将元素放置在其父元素的水平和垂直中心。

.center类表示要居中对齐的元素
。.parent表示其父元素。

1. 使用变换

何时使用：

• 当元素的宽度和高度未知时
• 类似卡片的模式，其中有多个子元素，中心有一个焦点元素。

思路是使用绝对定位，将顶部和左侧元素设置为 -50%，然后应用负变换。顶部和左侧元素的值基于父元素的尺寸解析，而translate方法中的值则基于元素本身的尺寸解析。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 使用 Flex

何时使用：

• 当有一个或多个元素需要居中时。
• 当子元素是动态的并且其大小未知时。
• 当有一排项目需要居中时，例如在页脚中

这个想法是将父容器变成一个弹性框，并使用弹性属性将元素沿水平和垂直方向居中，如下所示。

.parent {
    display: flex;
    justify-content: center; 
    align-items: center;
}

当有多个元素需要堆叠在一起以使堆栈位于中心时，我们只需添加以下行：

flex-direction: column; 

3. 使用负边距

何时使用：

• 当元素的高度和宽度已知时。

我们的想法是再次使用与变换技术类似的绝对定位，但我们应用元素宽度和高度的一半的负边距而不是平移。

$w: 200px; // SCSS Variable
$h: 100px; // SCSS Variable
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; // Negative margin of half the 
                        //  width and height

}

为了使此代码更加通用，我们使用 calc() 属性，如下所示：

(#{$h} / 2) - 高度的一半
(#{$h} / 2) * -1) - 高度一半的负值
这给了我们：

margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1); 

4. 使用网格

我最近在css-tricks.com上发现了这个很酷的技术

何时使用：

• 当只有一个子元素需要居中时。

思路是创建一个网格容器，并将边距设置为 auto。在非网格容器中，当边距设置为 auto 时，顶部边距和底部边距将取 0。

然而，在网格容器中，顶部边距和底部边距被均匀分配可用空间，从而使元素居中。

.parent {
  display: grid;
}
.center {
  margin: auto;
}

Jacob指出的另一种使用网格居中的方法：

.parent {
  display: grid;
  place-items: center;
}

5. 使用填充

不建议将此技术用于中心对齐，但它确实有效。

何时使用：

• 当父元素的高度已知/固定时。
• 当中心元素的高度是灵活的时候。

这个想法是为已知固定高度的容器设置固定的垂直填充，并允许子元素占据最大高度和自动边距。

.parent {
  height: 600px; //Fixed height
  padding: 200px 0; //Fixed vertical padding
}
.center{
  margin: 0 auto;
  height: 100%; // Child takes max height
}

6. 使用表格单元格

这种技术如今很少使用，可能会让人感到惊讶。然而，它确实有效。

这个想法是使用 display 强制父元素表现得像一个表格单元格。然后我们使用垂直对齐属性进行垂直居中，使用边距自动进行水平居中。

.parent {
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin: auto;
}

以上就是居中对齐元素的 6 种方法。

奖励 - 水平居中

水平居中通常与均匀填充或边距结合用于标题样式和页脚。

使用文本对齐

何时使用：

• 当中心元素为文本内容/inline-* 类型元素时
• Inline-* 包括 inline、inline-block、inline-flex、inline-table 等。

.parent {
   text-align: center;
}

它还可以使块类型的子元素居中，但不建议这样做。

使用保证金

何时使用：

• 当中心元素是块元素时

.center {
    margin: 0 auto;
}

这是上述所有技术的 Codepen 演示。

TL; DR：这里有一份简明的备忘单供您参考。请随意下载并分享。

如果您使用/探索了更多技术，请在评论中告诉我。另外，请在Twitter上关注我，获取更多开发内容！