zoukankan      html  css  js  c++  java
  • 页面布局-垂直水平居中

    1、父元素与子元素的宽高都未知

      1> 使用flex布局

    父元素{
      dispaly:flex;
      justify-content:center;
      align-items:center  
    }
    子元素{
    /* 没有其他要求 */
    }

      2> 使用transfrom:translate(-50%,-50%)

    /* position为 relative 子元素如果不设置宽,则会以父元素的宽一致 */
    子元素{
       position: relative;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%)
     }
    父元素{
      position:relative;
    }
    /* position为 absolute父元素需要设置position为relative*/
    子元素{
       position:absolute;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%)
     }

      3> 使用table布局

    父元素{
      display: table;
    }
    /*table-cell 的宽高为父元素table的宽高,适用于文字类的居中或者在tablecell元素中嵌套一个display:inline-block 的元素 */
    子元素{
      display:table-cell;
      vertical-align:middle;
      text-align:center;
    }

    2、未知容器的宽高子元素的宽高已知

      1>使用margin :-子元素高/2 0 0 -子元素宽/2

    父元素{
      position:relative;
    }
    /* position为 absolute父元素需要设置position为relative*/
    子元素{
       200px;
       height: 100px;
       position:absolute;
       top:50%;
       left:50%;
       margin: -50px 0 0 -100px
     }
    父元素{
      overflow:hidden
    }
    /* position为 relative父元素需要设置 overflow:hidden */
    子元素{
       200px;
       height: 100px;
       position: relative;
       top:50%;
       left:50%;
       margin: -50px 0 0 -100px
     }
  • 相关阅读:
    idea输出目录详解
    svn的使用教程
    java常用技术名词解析
    1.0 idea使用教程(配置)一
    fastDFS的搭建
    log4j的配置
    关于elementUI中上传组件点击上传时页面卡死的问题
    Nginx的反向代理
    给所有实体类重写tostring方法
    Nginx的配置
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/9413437.html
Copyright © 2011-2022 走看看