让元素相对于父元素垂直水平居中的CSS

垂直居中

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; 200px; height:100px;">
    </div>
</div>
</body>
</html>