HTML盒子位置50%回退代碼

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

以上代碼可以將一個盒子居中顯示在頁面中，其中top和left屬性為50%可以讓盒子在水平和垂直方向上都位于頁面的50%位置上，但此時盒子的位置是以盒子的左上角為基準計算的，所以需要使用transform屬性，將盒子向左上角移動自身寬高的一半，即可實現盒子以中心為基準點居中顯示。