第一种：将元素通过display：inline-block转化为行内块元素居中，例如：
box{width:500pxheight:500pxbox-shadow:0 0 5px #000text-align:centerfont-size:0}
box .zi{width:120pxheight:100pxbackground:#0f0display:inline-blockvertical-align:middle}
box:after{content:""display:inline-blockheight:100%vertical-align:middle}
第二种：用定位的方式将之移动到位置，例如:
box{width:500pxheight:500pxbox-shadow:0 0 5px #000position:relative}
box .zi{width:120pxheight:100pxbackground:#0f0
position:absoluteleft:0right:0top:0bottom:0margin:auto}
第三种：类似第二中只不过通过百分比调整位置，例如
box{width:500pxheight:500pxbox-shadow:0 0 5px #000position:relative}
box .zi{width:120pxheight:100pxbackground:#0f0position:absoluteleft:50%top:50%margin:-50px 0 0 -60px}
第四种：类似第三种，但是在调整回到中心位置时使用transform：translate( ，)进行调整，例如
box{width:500pxheight:500pxbox-shadow:0 0 5px #000position:relative}
box .zi{width:120pxheight:100pxbackground:#0f0
position:absoluteleft:50%top:50%transform:translate(-50%，-50%)}
第五种：使用弹性盒(display：flex)，例如
box{width:500pxheight:500pxbox-shadow:0 0 5px #000display:flexjustify-content:centeralign-items:center}
box .zi{width:120pxheight:100pxbackground:#0f0}
以上最常用的五种方式，除此之外还有很多方式，根据每个人的习惯不同个人用法不同
