CSS中有許多不同的技巧可以將彈窗置于頁面的中心位置。以下是其中一種方法:
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
此代碼片段利用了CSS中的三個屬性:position、top、left 和 transform。首先,我們將元素的position
屬性設置為fixed
,這使得它不會跟隨頁面滾動而移動位置。然后,我們使用top
和left
屬性將元素的中心點定位在頁面的50%位置。最后,我們使用transform
屬性的 translate() 方法將元素向左和向上移動自身的50%寬度和高度,以使其完全置于頁面中央。
實際上,您還可以使用許多其它不同的CSS技巧來實現此目的 - 這只是其中的一種方法而已。但是,具有固定位置的元素通常是更好的選擇,因為它們不會將其變形或更改其大小,并且可以確保元素完全居中。