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
     }
  • 相关阅读:
    【Python】python模块加载
    【Python】Django学习一:第一个Django程序
    【Python】Python PYQT4 GUI编程与exe打包
    XGBoost 输出特征重要性以及筛选特征
    数据挖掘博客收集
    python 多线程
    python 统计学的各种检验
    数据挖掘-逻辑回归解析
    Centos7 教程收集ing
    数据挖掘比赛优秀经验贴-收集ing
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/9413437.html
Copyright © 2011-2022 走看看