网页设计手法之“垂直居中”

作者: adiu | 来源:发表于2016-06-07 17:45 被阅读280次

    在说垂直居中之前,我们先回顾一下 水平居中

    • 如果它是一个行内元素,对父元素应用 text-align: center 即可
    • 如果它是一个块级元素,对元素自身应用 margin: auto 即可

    设计场景


    • 垂直居中是现实开发中常见的需求之一
    • 当要对宽高不固定的元素进行垂直居中的时候,开发的哥哥们就要挠头了

    基于绝对定位的解决方案

    • 结构:
    <div class="main">
      <h1>标题</h1>
      <p>固定宽高元素垂直居中</P>
    </div>
    
    • 风格:
    .main {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -50px;
        width: 200px;
        height: 100px;
    }
    

    之前在[《网页设计手法之“满幅的背景,定宽的内容”》][1]一文中,有讲过calc()函数,基于该函数,我们可以对上面的风格做个优化:

    .main {
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50% - 50px);
        width: 200px;
        height: 100px;
    }
    

    很显然,这个方法的最大局限性在于 元素的宽高必须是固定的;但很多时候,元素的大小是由其内容决定的,我们就得找一个 **百分比值是以自身的宽高为基准的属性 **

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

    基于视口单位的解决方案


    当不使用绝对定位的时候,我们就会丢失left和top,此时我们面临的问题是:如何把这个元素的左上角放置在容器的正中心?

    .main {
      width: 200px;
      margin: 50vh auto 0;
      transform: translateY(-50%);
    }
    

    结合了 固定宽度+margin 的水平居中方法
    使用视口单位vh,即1vh表示视口高度的1%;它是以整个视口为参照标准的

    注意:它只适用于在视口中居中的场景

    基于FlexBox的解决方案


    body {
      display: flex;
      min-height: 100vh;
    }
    .main {
      margin: auto;
    }
    

    注意:
    待居中元素的父元素 display: flex + 待居中元素的父元素的固定高度 + 待居中元素margin: auto,可以实现水平垂直方向上的居中;

    如果浏览器不支持Flexbox,垂直居中就会丢失,居中的元素就会紧贴着顶部,看起来还是可以接受的,也算是一种 优雅降级
    [1]:http://www.jianshu.com/p/a92f8f8f4d82

    《CSS SECRETS》

    相关文章

      网友评论

      • 7710addd8df8:当你想要一个垂直居中显示的loading的时候,不兼容的
        flex-box 真的令人蛋疼,其实也可以用display:table-cell的方法做
        adiu:@CARYI 正解,就此拉开了一场“战争”,哈哈~
        7710addd8df8: @adiu 如果仅仅用作居中显示一个弹出层的话,个人觉得还是可以的,有些挑剔产品经理/UI,你懂的
        adiu:@CARYI 哈哈,确实让难过,不过向下兼容的方案如果可以接受的话,也还是可以的;个人比较喜欢向下兼容,毕竟表格对优化不是很好,它用到更多的地方可能是展现个元数据、电子邮件
      • Northerner:单位 vh 学习了
        何暖暖:那就好好学:stuck_out_tongue:

      本文标题:网页设计手法之“垂直居中”

      本文链接:https://www.haomeiwen.com/subject/grbddttx.html