盒子居中方法

1.已知大盒子的宽高和小盒子的宽高
直接margin （大盒子-小盒子）/2
注：将小盒子的类型display:inline-block
2.已知小盒子的宽高
大盒子相对定位，小盒子绝对定位，top、left 为50%，再使用margin ：负小盒子宽高的一半
3.都不知道宽高
大盒子相对定位，小盒子绝对定位，将top、left、right、bottom 都设为0，再设置margin:auto
4.display:flex 实现水平上下居中
display:flex;
justify-content属性定义了项目在主轴上的对齐方式。justify-content:center;水平居中
align-items属性定义项目在交叉轴上如何对齐。 align-items: center; 垂直居中
注：当前的属性都设置在父级盒子上面
5.使用动画transform：translate(-50%，-50%)
将父级盒子相对定位，小盒子绝对定位top left 均设为50%，给小盒子添加transform：translate(-50%,-50%)
注：transform：translate(-50%，-50%) 里面的50%为所加动画的盒子（小盒子）