zoukankan      html  css  js  c++  java
  • 布局-垂直居中

    结构:

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

    样式:

    1.方案一:vertical-align +  table-cell (若child为浮动的,也是可以的)

    .parent {
            height: 200px;
            background-color: grey;
            display:table-cell;/*父容器变成了一个单元格*/
            vertical-align: middle;/*可作用在inline元素上,inline-block元素上,以及table-cell元素上*/
        }
        .child  {
            background-color: skyblue;
        }
        /*table-cell兼容到IE8,若要兼容IE6,7,把结构换成表结构,即兼容性比较好*/

    2.方案二:absolute+transform

    .parent {
            position: relative;
            background-color: grey;
            height: 200px;
             40px;
        }
        .child  {
            background-color: skyblue;
            
            position: absolute;
            top: 50%;/*相对与容器的百分比*/
            transform: translateY(-50%);/*相对与自身的百分比*/
        }
        /*优点:子元素不会影响其他元素
        缺点:transform是css3新增的元素*/

    3.方案三: flex +  align-items(默认值:stretch,垂直方向对齐)(align-items:stretch/flex-start/center/flex-end/baseline)

     1 .parent {
     2         display: flex;
     3         align-items: center;
     4 
     5         background-color: grey;
     6         height: 200px;
     7          40px;
     8     }
     9     .child  {
    10         background-color: skyblue;
    11     }
    12     /*优点:只给parent设置样式
    13     缺点:只有高版本才兼容*/
  • 相关阅读:
    浏览器渲染原理
    element 表单清空提示语(单个 )
    同步异步
    数组的浅克隆
    ... 运算符
    解构赋值
    vue 中el-input 为number 如何控制不允许输入负号
    Android SDK Manager 更新代理配置
    Android 设计中的.9.png
    Android 编程下的 Secret Code
  • 原文地址:https://www.cnblogs.com/Janejxt/p/5878887.html
Copyright © 2011-2022 走看看