在進行CSS的頁面縮放時，會發現元素的坐標也會跟著發生改變，這個原因是因為CSS中的length單位是相對于視口尺寸而言的，因此當視口大小發生了變化，length單位也會相應地發生變化。

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

在上述代碼中，我們通過設置top和left值為50%，來使元素水平居中和垂直居中，然后通過transform屬性的translate函數，將元素在水平和垂直方向上各向左上移動了50%自身大小。

然而，當頁面進行了放縮時，例如將頁面放大了兩倍，那么這個100px的元素實際上會變成了200px，但是我們設置的top和left值卻還是50%，導致元素的位置發生了偏移。因此，我們需要調整我們的top和left值，以適應放縮后的頁面。

.box{
width: 100px;
height: 100px;
top: calc(50% * 縮放比例);
left: calc(50% * 縮放比例);
transform: translate(-50%, -50%);
position: absolute;
}

在上述代碼中，我們通過使用CSS3的calc函數，來動態計算出適應放縮后的top和left值。縮放比例可以通過JavaScript來獲取當前頁面的縮放比例，也可以手動設置一個固定值。