CSS全体のページの縦横の整列

Question

4kモニタは新生であるため、モニタの4面すべてから小さなページを整列させる必要があります。これは、絶対配置された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：それは限りmainArea` `の祖先あり、他の位置の要素が存在しないとして動作するはずのよう

position: absolute; 

width: 882px; 

height: 420px; 

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

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