学习记录419@vue居中方法

在vue中样式调整中用了大量的居中样式

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

原本左上角和父级元素的左上角重合，left: 50%;像右移动父级元素的50%，top: 50%;向下移动父级元素的50%，这样子元素就得左上角就在父级元素的中心点了；
transform: translate(-50%,-50%);translate第一个参数控制x轴方向移动，-50%表示向左移动自身宽度的50%，第二个参数控制y轴方向方向移动，-50%表示向上移动自身高度的50%；
以上就确保了子元素的中心和父级元素的中心重合；
当然前提是position: absolute;也就是绝对位置；
关于translate详见以下链接
translate详解

我最后就写出个这么个玩意儿…