布局-垂直居中

Posted 2020-08-09 姜小七的填坑之旅

结构：

<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;
        width: 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         width: 40px;
 8     }
 9     .child  {
10         background-color: skyblue;
11     }
12     /*优点：只给parent设置样式
13     缺点：只有高版本才兼容*/