垂直居中方法总结

一直想要梳理总结一遍，今天终于开了头，文章会不定期更新，本人前端小白，有不正确的地方，欢迎大佬指正

目前先总结了7种垂直居中方法，有更简单的好用的会持续更新，敬请关注

第一：设置line-height

<div class="box1">

        <span class="content">垂直居中</span>

    </div>

.box1 {

        width: 300px;

        height: 300px;

        border: 1px solid red;

        line-height: 300px;

    }

第二：绝对定位和相对定位

.box1{

        width: 300px;

        height: 300px;

        border: 1px solid red;

        position: relative;

    }

    .content{

        position: absolute;

        top:50%;

        transform: translate(0,-50%);

        /* margin-top:-10.5px; */  或者查看子元素的高度，都可以实现垂直居中，这里span的高度是21px，

    }

第三：vertical-align

.box1{

        width: 300px;

        height: 300px;

        border: 1px solid red;

        display: table-cell;

        vertical-align: middle;

    }

第四：flex

.box1{

        width: 300px;

        height: 300px;

        border: 1px solid red;

        display: flex;

        align-items: center;

    }

第五：利用伪元素

.box1{

        width: 300px;

        height: 300px;

        border: 1px solid red;

}

.box1 span{

  vertical-align:middle;

  display:inline-block;

  font-size:16px;

}

.box1:after{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  vertical-align:middle;

}

第六：依然flex布局

.box1{

    width: 300px;

        height: 300px;

        border: 1px solid red;

    display: flex;

}

.content{

    margin:auto 0;

}

第七：

.box1{

    width: 300px;

        height: 300px;

        border: 1px solid red;

    display: -webkit-box;

    -webkit-box-pack:center;

    -webkit-box-orient: vertical;

}