T O P

[资源分享]     CSS居中对齐终极指南

  • By - 楼主

  • 2021-07-26 22:00:10
  • 本文首发于我的公众号:前端新世界
    欢迎关注

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

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

    .parent类代表其父元素。

    1. 使用变换(Transform)

    什么时候用:

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

    这个思路是使用绝对定位——topleft 50%,然后应用负变换。topleft中使用的值根据父元素的尺寸解析,而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-topbottom取值为0。

    但是,在网格容器中,margin-topbottom平均分配可用空间,从而使元素居中。

    .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-*包括inlineinline-blockinline-flexinline-table等。
    .parent {
       text-align: center;
    }
    

    它还可以居中块类型子元素,但我们不推荐这么做。

    使用边距

    什么时候用:

    • 当中心元素是块元素时
    .center {
        margin: 0 auto;
    }
    

    感谢阅读!

    每日分享前端插件和前端开发教程,欢迎扫码关注我的公众号:前端新世界

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册