第一个，它距离父元素left:50%,top:50%，那就是父元素一半的距离，因为要实现居中即自身的中点在父元素的中间才算，所以margin-left/margin-top 负的自身宽/高的一半，那么正好水平垂直居中。
第二个，元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的，不像margin-left作用的时候margin-right没用，那么现在left:0,right:0,两方实力相当，浏览器没办法，都得满足，那就水平居中吧，而绝对定位元素默认top是0.现在margin:20px，那就是把自己往下移动20px。严格来说移动25px才真正的垂直居中
当我们给元素添加Animation后，动画总是现在元素的初始位置显示一下，然后再跳到动画的起始位置播放，这样的话会很难看。
解决方法：
使用animation-fill-mode:forwards属性
forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置
backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置
上边样式的将变现为，class为phone的元素会在加载完成后，从它的定义位置靠下5rem开始动画。
js中赋值nimation-fill-mode:forwards的方法：
object .style.animationFillMode=none | forwards | backwards | both
如果在当前页面的话天降，就是这样写的。<style>
.cnblogs-markdown pre{border-style: dashed dashed dashed solidborder-width: 1px 1px 1px 2pxborder-color: rgb(170, 170, 170) rgb(170, 170, 170) rgb(170, 170, 170) rgb(108, 226, 108)
}
</style>
如果你新建一个CSS文件的话
就用<link rel="stylesheet" href="你的文件.css" type="text/css" />加入链接
这个文件里面就写
.cnblogs-markdown pre{border-style: dashed dashed dashed solidborder-width: 1px 1px 1px 2pxborder-color: rgb(170, 170, 170) rgb(170, 170, 170) rgb(170, 170, 170) rgb(108, 226, 108)
