如何將視圖中間的元素居中？

-4

我想在視口中間放置一個元素（div，模式/對話框），而不管頁面大小。如何將視圖中間的元素居中？

想法是，對話框總是出現在當前視圖端口的中間，所以無論頁面大小如何，用戶都能看到它。在我的情況下，我有一個很長的頁面，有很多滾動，如果用戶在頁面的底部，並且對話框出現在頁面的中間，用戶看不到它，因爲它不在他的視口中。

我的HTML網站運行在iframe中，這使得任務變得更加困難。

我怎樣才能用CSS做到這一點？

來源

2017-10-05 Stefan

用'位置：絕對'或'位置：固定' – lll

嘗試你的運氣絕對位置不起作用，因爲我不想將它相對於父位置。固定不起作用，因爲我想在視口的中間，而不是整個頁面。 – Stefan

這就是'position：absolute'的意思。將其與其父元素分離，除非您明確將父項設置爲'relative'。 –

試試這個片段。

.modal{ 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="modal"> 
 
    
 
</div>

嗯，你編輯的問題，並提到後，該頁面是在iframe，我至少可以說，這是不可能的元素放置的iframe內到瀏覽器的當前視口。該元素的最全面的背景是iframe本身，並且它沒有嵌入任何信息。

來源

2017-10-05 11:49:11

謝謝。然後我知道我做不到。 – Stefan

如果您將iframe自身居中放置在其父視口中，那麼您的模態也將以某種方式位於主頁的中心。但是我不知道在你的具體情況下這將是怎麼可能的。 –

應用下面的CSS

.center{ 
position: fixed; 
left: 50%; 
top: 50%; 
transform: translate(-50%,-50%); 
}

固定會確保它是相對於視位置。左上角50％會將元素的頂部和左側移動到中心。您希望它處於絕對中心位置，可以通過轉換完成：translate（-50％， - 50％）;

來源

2017-10-05 11:49:37 Pavan

如何將視圖中間的元素居中？

回答

相關問題