1）使用absolute+transform
（1）原理、用法
原理：將水平居中時的absolute+transform和垂直居中時的absolute+transform相結合。詳見：水平居中的3）和垂直居中的2）。
見水平居中的3）和垂直居中的2）。
（2）代碼實例
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
}
（3）優缺點
優點:child元素不會對其他元素產生影響
缺點:兼容性存在一定問題
2）使用inline-block+text-align+table-cell+vertical-align
（1）原理、用法
原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，將二者結合起來。詳見：水平居中的1）和垂直居中的1）。
見水平居中的1）和垂直居中的1）。
（2）代碼實例
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
text-align:center;
display:table-cell;
vertical-align:middle;
}
.child {
display:inline-block;
}
（3）優缺點
優點:兼容性較好
3）使用flex+justify-content+align-items
（1）原理、用法
原理：通過設置CSS3佈局利器flex中的justify-content和align-items，從而達到水平垂直居中。詳見：水平居中的4）和垂直居中的3）。
見水平居中的4）和垂直居中的3）。
（2）代碼實例
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
display:flex;
justify-content:center;
align-items:center;
}
（3）優缺點
優點:只設置了parent
缺點:兼容性存在一定問題
如果小夥伴們想了解更多WEB前端知識，可以加藍軌跡WEB開發交流qq羣：143046757