垂直居中
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>
