浅谈元素垂直居中的几种方法

在目前的学习阶段，学习了几种元素垂直的方法，都是比较实用而且便于理解的，于是总结了一下这几种方法。便于以后学习和查阅。
方法一：定位
    给父元素相对定位，子元素绝对定位。然后给子元素的上下左右值为零，再给一个margin：auto；即可。具体代码如下：
    html：<div class="box box1">
    <span>垂直居中</span>
    </div>
    css：.box1 span{
          width: 50%; 
          height: 50%; 
          background: #000;
          overflow: auto; 
          margin: auto; 
          position: absolute; 
          top: 0; left: 0; bottom: 0; right: 0; 
        }
方法二：绝对定位和负边距
给一个绝对定位，然后top和left给50%，然后margin-left和margin-top的值给子元素的一半即可。
        .box2 span{
                    position: absolute;
                    width:100px;
                    height: 50px;
                    top:50%;
                    left:50%;
                    margin-left:-50px;
                    margin-top:-25px;
                    text-align: center;
                }
        方法三：display：inlie-block
        1、给父元素加上text-align：center
        2、把当前元素转成行内快元素（display：inlie-block），然后加上vertical-align：middle。
        3、给当前元素后面加上同级元素span，并且给span宽设置为0；高设置为100%；然后再进行display：inline-block和vertical-align：middle的操作。
        代码如下：
        .box3 span{
              vertical-align:middle;
              display:inline-block;
              font-size:16px;
            }
            .box3:after{
              content:'';
              width:0;
              height:100%;
              display:inline-block;
              vertical-align:middle;
            }
        方法四：使用弹性盒
        1、把父元素通过display：flex改变成弹性盒。
        2、然后加上justify-content：center；
                align-items：center；