CSS居中对齐终极指南

本文首发于个人公众号：前端新世界
欢迎关注

本文将讨论可用于居中对齐元素的6种CSS技术（按照最佳实践排序），以及每一种技术最适合应用的场景。这里，居中对齐指的是将元素放置在其父元素的水平和垂直中心。

.center类表明要居中对齐的元素

.parent类表明其父元素。

1. 使用变换（Transform）

何时用：

• 当元素的宽度和高度未知时；
• 卡片式弹出框中有多个子元素，其中一个焦点元素位于中心。

这个思路是使用绝对定位——top和left 50％，而后应用负变换。top和left中使用的值根据父元素的尺寸解析，而translate方法中的值根据元素自己的尺寸解析。

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

2. 使用Flex

何时用：

• 当有一个或多个元素要居中时；
• 当子元素是动态的而且大小未知时；
• 当有一行项目须要像页脚同样居中时。

这个思路是使父容器成为flexbox并使用flex属性将元素沿水平和垂直方向居中，以下所示。

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

当有多个元素须要一个在另外一个元素上方堆叠，并使该元素堆叠在其中心时，咱们只需添加如下代码行：

flex-direction: column;

3. 使用负边距

何时用：

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

这个思路是再次使用相似于变换技术的绝对定位，但应用的是元素宽度和高度一半的负边距而不是平移。

$w: 200px; /* SCSS 变量 */
$h: 100px; /* SCSS 变量 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; /* Negative margin of half the 
                          width and heigh */t

}

为了使这段代码更通用，咱们使用calc()属性，以下所示：

(#{$h} / 2) - 一半高度

(#{$h} / 2) * -1) - 一半高度的负值

这样就能够：

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

4. 使用网格（Grid）

何时用：

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

这个思路是建立一个网格容器并将边距设置为auto。在非网格容器中，当margin设置为auto时，margin-top和bottom取值为0。

可是，在网格容器中，margin-top和bottom平均分配可用空间，从而使元素居中。

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

另外一种使用网格来实现居中的方法是：

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

5. 使用填充（Padding）

不建议将此技术用于中心对齐，但它也是可行的。

何时用：

• 当父元素的高度已知或者固定时；
• 当中心元素的高度为弹性可变时。

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

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

6. 使用表格单元格

这个技术如今用得比较少，可是也值得借鉴。而且，它确实也是可行的。

这个思路是使用display强制父级表现得像一个表格单元格。而后使用vertical align属性进行垂直居中，使用margin auto进行水平居中。

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

以上总结了居中对齐元素的6种方法。

另外咱们再讲一讲——水平居中

水平居中一般用于标题样式和页脚，并结合均匀的填充或边距。

使用文本对齐

何时用：

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

.parent {
   text-align: center;
}

它还能够居中块类型子元素，但咱们不推荐这么作。

使用边距

何时用：

• 当中心元素是块元素时

.center {
    margin: 0 auto;
}

感谢阅读！

每日分享前端插件和前端开发教程，欢迎扫码关注个人公众号：前端新世界