html - コンテナをエラスティック バックグラウンド環境の中央に配置する

Question

この例のウェブサイトを確認してください。私がコードをよく読んだ場合（ちょうど見ただけです）、中央のコンテナが常に中央にとどまることができるように、いくつかのjavascriptを含むテーブルでセットアップされ、本体には画面サイズに応じて拡大する2つの流動的な色の背景があります。

私はこのようなものを再現しようとしていましたが、css を使用するだけで、できると確信していますが、方法がわかりません。読むべき指示/ドキュメントを教えてください。

Answer 1

ここJsfiddleで簡単な構造を設計しました。見てください

マークアップ::

<div class="wrapper">
   <div class="head_wrapper">
      <div class="left_head">left</div>
      <div class="right_head">right</div>
  </div>
 <div class="body_wrapper">
      <div class="left_body">left</div>
      <div class="right_body">right</div>
 </div>
</div>

CSS ::

.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
 background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}