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%居中