假設一個div里面有一個p元素。<div><p></p></div>
第一種居中方式：
利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個偽元素，並使得樣式為inline-block;height:100%;就是和父元素一樣高，vertical-align:middle;垂直居中，也就是p元素相對與偽元素居中，由於偽元素和div一樣高，所以相當於p元素在div里垂直居中。
css樣式如下：
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
第二種居中方式：
這里利用了定位居中
子元素p設置position：absolute脫離文檔流,默認以html作為父元素，所以我們給父元素div設置position:relative;使得p以div為父元素做位置的變動，left:0;tight:0;top:0;bottom:0;（只有設置了定位的元素才可以使用這種方式來移動），最后margin:auto;就會水平和垂直都居中。
第三種居中方式：
這里利用了彈性盒居中
父元素div設置成彈性盒樣式，justify-content:center;主軸居中
align-items:center;垂直居中（而且這兩個只能設置在父元素上，彈性盒知識）
css樣式：
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
第四種居中方式：
利用定位線左上角居中，然后左移子元素寬度的一半，再上移子元素高度的一半。
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
第五種居中方式：
利用定位+動畫移動屬性transform
transform:translate(-50%,-50%);