将一个元素固定在父元素的正中间，即元素水平垂直居中

需求描述：

如下图所示，需要将一个元素固定到父元素的正中间，水平垂直居中

如何使用css实现此需求：

其实这个需求是有固定代码的，通过我的这篇博客学习这一次，然后记住即可！

第一步： 既然是相对于父元素定位，那么就要使用绝对定位。
代码：position: absolute;
第二步： 往右走父元素的一半，往下走父元素的一半。
代码：left: 50%; top: 50%;
此时会看到子元素向右多走了自己的长度，向下多走了自己的宽度，所以要相对自己往回走50%
第三步： 往左走自己长度的50%，往上走自己宽度的50%。（使用transform）
代码：transform: translate(-50%,-50%);

完整代码：

.box{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

一般情况下，无特殊需求，复制这段代码即可实现此需求。

注意：
由于使用了绝对定位，所以必须确保其父元素是具有定位属性的，如果没有，在父元素的css上加上position: relative; 即可。