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;

}


留言

Leave a comments