使盒子垂直的四种方式

一 flex布局

在要居中的元素父盒子中加上
display:flex
justify-conten:centen(主轴)
align-items:center(侧周)

二transform

需要用到绝对定位(在要居中的元素身加)
postion :absolute
top:50%
left:50%
transform:translate(-50,50%)

三margin

用margin再往回走的自身宽度的一半（在要居中的元素本身加）
position:absolute
top:50%
left:50%
marigh-left：自身宽度的一半
maright-top:-自身宽度的一半

四 maright:auto

position:absolute
top:0
left:0
right:0
margin:auto