zoukankan      html  css  js  c++  java
  • 页面架构(笔记2)——垂直居中布局

    需求要求:

    1.子容器相对父容器垂直居中

    2,子容器与父容器的自身高度都是自适应的

    image image image

    解决方案一(table-cell+vertical-align)

    <style type="text/css">
        body{margin:20px;}
        .parent{width:4em;height:500px;}
        .child{width:100%;}
        
        .parent{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    要点:
    vertical-align属性可以作用在inline元素,inline-block元素以及table-ceil上
    方案一优点:兼容性好,兼容Ie8+(包括ie8)
    缺点:.Ie6.7不兼容table-ceil,可以通过改成table结构的方法来兼容

    解决方案二(absolute+transform)

    <style type="text/css">
        body{margin:20px;}
        .parent{width:4em;height:500px;}
        .child{width:100%;}
    
        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    方案二优点:absolute脱离文档流,不会对其他元素产生影响,
    缺点:transform:不支持Ie6,7,8,兼容性达不到要求,可以在不同的浏览器前加上私有前缀

    解决方案三(flex+align-items)

    <style type="text/css">
        body{margin:20px;}
        .parent{width:4em;height:500px;}
        .child{width:100%;}
    
        .parent{
            display: flex;
            align-items: center;
        }
    </style>
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    方案一优点:只要给parent设置就可以了
    缺点:flex不支持Ie6,7,8,兼容性达不到要求
  • 相关阅读:
    15、SQL基础整理(视图)
    14、SQL基础整理(存储过程)
    13、SQL基础整理(流程控制begin……end)
    12、SQL基础整理(运算符与优先级)
    11、SQL基础整理(变量)
    10、SQL基础整理(约束2)
    9、SQL基础整理(两表连接exists,join on,union)*Oracleも含む(INTERSECT&MINUS)
    20141113--SQL 事务
    20141111--SQL触发器
    20141110--SQL视图
  • 原文地址:https://www.cnblogs.com/zz334396884/p/5199392.html
Copyright © 2011-2022 走看看