css元素垂直居中方法

方法1 子绝父相

父级设置相对定位 relative

子级设置绝对定位 top left 50%  设置margin如图

.box {
    position: relative;
}
.small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
}

方法2  transform实现

子级设置一个 translate（-50%，-50%） top left 50%

.box {
    position: relative;
}
.small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 100px;
    height: 100px;
}

  方法3 flex布局  父级设置

display:flex
justify-content:center
aligin-items:center