當我們需要放大一張圖片時，最簡單的方法是用CSS設置它的寬高?？墒沁@種方法卻會讓圖片跑到文檔流中的特定位置，這時您可能需要脫離文檔流。下面是一些居中放大圖片的CSS技巧。

/* 下面是CSS居中放大圖片的代碼 */
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
position: relative;
z-index: 1;
transition: transform .3s ease;
}
.img-container::before {
content: "";
display: block;
padding-top: 100%;
}
.img-container:hover img {
transform: scale(1.2);
z-index: 2;
}

上述代碼通過設置圖片的position屬性為relative，使其相對父元素的位置可變，并且添加了一個偽元素::before，用于保持父元素的縱橫比例。接著，當我們懸停在圖片上時，通過使用transform將圖片放大，并設置z-index屬性使其位于頂層。

如果您需要支持IE，可以使用擁有更多前綴的CSS動畫。

/* 應用于IE的CSS動畫代碼 */
.img-container img {
-ms-transform-origin: center center;
-ms-transition: all .3s ease;
-webkit-transform-origin: center center;
-webkit-transition: all .3s ease;
transform-origin: center center;
transition: all .3s ease;
}
.img-container:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

上述代碼與前一個代碼塊相同，只是添加了IE瀏覽器的支持。

總的來說，您可以使用這些CSS技巧以更好的方式展示您的圖片，并且脫離文檔流。您可以通過觀察并嘗試上述代碼，來更深入了解它們的工作原理。