Html元素100%居中(垂直+水平) 实现(transform方式)

#Box{
    width:100px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

        第一步父级元素设置定位 ,没有则相对body的位置

        第二步 设置自身的定位 position:absolute;

        第三步
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);

       这样设定的居中,即使窗口改变,也100%居中