• CSS布局-垂直居中问题


    在前端页面的布局方面,很多时候需要用到垂直居中,如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top:50%;margin-top:- height/2 px;实现,那么如果父元素的高度和子元素的高度都不是固定值呢?

    下面就总结一下使用css进行垂直居中布局的方法及使用环境。最好用的在最后。

    html 使用如下:

    <div class="parent">

    <div class="child"> </div>

    </div>

    1.父元素高度与子元素高度差值为固定值,对父元素使用padding使子元素居中

    当父元素与子元素差值为固定值 H px 时,可以对父元素使用上下边的padding:H/2 px;  把子元素居中。

    .parent{
      width:200px;
      height:auto;
      padding:50px 0;
      background-color: #13B202;
    }
    .child{
      width: 40px;height: 40px;
      margin:0 auto;
      background-color: #000;
    }

    效果如下:

    2. 父集高度为固定值,父集使用 line-height ,子集使用 display:inline-box ; 

    对父元素使用line-height:父集的高度;

    由于line-height只对行元素有效果,所以改变子元素的display属性为inline-block,这样,行元素即可以有行元素属性,又能够像块元素一样设置宽高。

    最后对子元素设置vertical-align: middle; 使其在行高内垂直居中,这样居中布局就实现了。

    .parent{
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      background-color: #13B202;
    }
    .child{
      display: inline-block;
      width: 40px;height: 40px;
      vertical-align: middle;
      background-color: #000;
    }

    效果如下:

     3.子元素高度固定,如果需要横向居中,子元素宽度也需固定,对子集使用定位 使其居中。

    当子元素 的高度固定,无论父元素高度如何变化,子元素都可以通过 top:50%; margin-top: - 子元素高度/2 px ;使其垂直居中,这种一般用于父集高度不固定,会随着屏幕高度或者其他因素变化的情况使用,例如弹窗的垂直居中。对于水平方向的居中也一样,使用left:50%;margin-left:-子元素宽度/2 px ;

    .parent{
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #13B202;
    }
    .child{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 40px;
      height: 40px;
      margin-left: -20px;
      margin-top: -20px;
      background-color: #000;
    }

    效果如下:

     

    4. 父元素高度不固定,子元素高度也不固定 。

    这种情况下上面列出的都不能使用,当遇到这种情况时确实很让人头疼,不知如何是好,那么使用css3的 box-align 和 box-pack 进行水平居中,使用align-items进行垂直居中。

    这种情况下,无论父元素和子元素宽高如何变化,子元素都能够保持水平和垂直居中显示。唯一不足之处就是对于不支持CSS3的浏览器不能使用。

    .parent{
        width: 200px;
        height: 200px;
        background-color: #13B202;
        display: flex;
        display: -webkit-flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .child{
        width: 40px;
        height: 40px;
        background-color: #000;
    }

     效果如下:

    5. 使用定位 和 css3 的 transform 属性, 对.child 定位 left: 50%; top: 50%; transform: translate(-50%,-50%);

    无论父级和子集的宽高如何变化,它都能实时居中,吼吼吼,效果图就不放了哈哈哈~

  • 相关阅读:
    记录心得-IntelliJ iDea 创建一个maven管理的的javaweb项目
    记录心得-FastJson分层解析demo示例
    11.05Mybatis注解
    11.03Mybatis标签
    11.04Mybatis resultMap元素
    11.02Mybatis Mapper映射器
    11.02Mybatis SQL执行方式
    10.30Mybatis配置文件及其元素
    10.30Mybatis三要素
    10.29第一个Mybatis程序
  • 原文地址:https://www.cnblogs.com/hanguozhi/p/7472874.html
Copyright © 2020-2023  润新知