CSS整頁垂直和水平對齊

Question

由於4k顯示器是新生的，我需要對齊顯示器所有四面的小頁面。它由絕對定位的div組成，放置在一個容器內。 身體：

<div id="mainArea"> 
    div elements containing text, images, links go here. 


    </div> 

的CSS：

body { 

background-image: url(); 


} 

.mainArea {

position: absolute; 

width: 882px; 

height: 420px; 

left: 50%; top: 50%; 
transform: translate(-50%, -50%); 

我已經嘗試了一些互聯網上的建議，但他們基本上解決了水平和垂直簡單內容的對齊，如文字或圖像，而不是整個網站。這些不知何故在我的情況下不起作用，也許是由於我的經驗不足。任何援助讚賞。

Answer 1

使用calc：

position: absolute; 

width: 882px; 

height: 420px; 

left: calc((100vw - 882px)/2); 
top: calc((100vh - 420px)/2); 

transform: translate(-50%, -50%);