CSS 居中对齐的多种方式

Regina
3,494 阅读3分钟

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

居中对齐: 指的是将元素定位在相对父元素的水平和垂直的中心

本文整理在多种情况下，使元素居中对齐的方法

文本对齐

使用场景：当中心元素为文本内容或者inline-*类型元素时

linline-*包括inline、inline-block、inline-flex、inline-table等

.parent {
   text-align: center;
}

它还可以居中块类型子元素，但一般不推荐这么用

使用边距

使用场景：当中心元素是块元素时

.center {
    margin: 0 auto;
}

flex

使用场景：有一个或多个元素居中

这种方式是使父容器成为flexbox并使用flex属性将元素沿水平和垂直方向居中

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

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

flex-direction: column;

transform

使用场景：元素的宽度未知，高度未知

这种方式是使用绝对定位——top和left 50％，然后应用负变换。top和left中使用的值根据父元素的尺寸解析，而translate方法中的值根据元素本身的尺寸解析

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

负边距

使用场景：当元素的高度和宽度已知时

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

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

为了使这段代码更通用，我们使用calc()属性

// (#{$h} / 2) - 一半高度
// (#{$h} / 2) * -1) - 一半高度的负值
margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);

grid

使用场景：当只有一个子元素需要居中时

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

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

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

网格还可以使用另一种方式来实现居中

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

padding

使用场景：当父元素的高度已知或者固定时；当中心元素的高度为弹性可变时

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

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

表格单元格

这种方式现在用得比较少，但是也值得借鉴。并且，它确实也是可行的。

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

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

后续会再整理补充~

avatar
文章
阅读
粉丝