垂直居中
position: relative;top: 50%;transform: translateY(-50%);
1、position: relative;
理解：relative是相对的意思，这里是相对于父元素
2、top: 50%;
理解：高度是50%，指的是父无素的高度的50%。
3、transform: translateY(-50%);
理解：向上移动自身元素高度的50%。
水平居中
position: relative;left: 50%;transform: translateX(-50%);
下面是示例代码：
<html><head></head><body><div style="height:500px; background-color:gray;"> ???<div style="position:relative; top:50%;left:50%; transform:translateY(-50%) translateX(-50%); background-color:blue; width:200px; height:100px;"> ???</div></div></body></html>
让元素相对于父元素垂直水平居中的CSS
原文地址：https://www.cnblogs.com/wjx-blog/p/8669791.html