一、水平居中
1.inline元素用tet-align:center;
2.block元素用margin：auto；
二、垂直居中
1.flex弹性盒子
父元素定义 display:flex;align-item:center;
2.absolute绝对定位
i.position:absolute;top:50%;left:50%;width:x;height:y;margin-left:-x/2;margin-top:-y/2;
缺点是必须指定元素的宽高，否则无法给定margin，显得不够灵活。可以使用translate（）替代；
ii.position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
3.vh视口单位
可使用vh视口单位代替position
vh是视口高度，vw是视口宽度。例如1vh表示视口高度的1%；
width:x;//因为去掉了absolute，失去了包裹性，所以需要指定width
margin：50vh auto 0;//上边距50%，左右居中，下边距0
transform:translateY(-50%)
原文地址：https://segmentfault.com/a/1190000006700787
css水平居中与垂直居中
原文地址：https://www.cnblogs.com/qijiamin/p/10411478.html