不定宽高-实现水平居中

1.使用position定位 ---子绝父相

然后利用transform属性，将其往左平移span自身长度的50%，
往上平移span自身长度的50%，这样中间的盒子就居中了。
.outer {
    position: relative;
       }
.outer .in {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

2.flex布局

.outer{
    display:flex;
    align-item:center;
    justify-content:center;
    }