css垂直居中的七种方法

1. 通过line-height和inline-block来垂直居中

优点: 代码简洁,兼容性极好

缺点: 需要知道div高度,并且要手动设置line-height

  .div1 {	
   			height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .div1>div {
            display: inline-block;
            vertical-align: middle;
       }

2. 通过绝对定位和transform来垂直居中

优点: 代码简洁,兼容ie9以上

缺点: 如果需要多个元素水平垂直排列需要进行计算, 需防止重叠的情况

   .div2 {
            position: relative;
        }

        .div2>div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

3. 通过弹性布局flex来垂直居中

优点: 代码非常简洁, 操作非常方便, 布局灵活性强, 移动端典型的方案

缺点: 仅ie11以上支持

   .div3 {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

4. 通过网格布局grid来垂直居中

优点: 代码简洁, 操作非常方便, 布局灵活性很强

缺点: 兼容性比flex还差, 是比较新的方案

    .div4 {
            display: grid;
        }

        .div4>div {
            align-self: center;
            justify-self: center;
        }

5. 通过绝对定位和子元素负margin来垂直居中,子元素margin设置为宽高的一半

优点: 代码简洁, 兼容性极好

缺点: 需要知道子元素宽高

  .div5 {
            position: relative;
        }

        .div5>div {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px;
        }

6. 通过绝对定位和子元素calc计算来垂直居中

优点: 代码简洁

缺点: 需要知道子元素宽高,兼容ie9以上

        .div6 {
            position: relative;
        }

        .div6>div {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }

7. 通过table-cell布局垂直居中

优点: 代码简洁,兼容性极好

缺点: 父元素不能设置百分比

  .div7 {
            width: 1000px;
            display: table-cell;
            vertical-align: middle;
        }

        .div7>div {
            margin: auto;
        }