title: Margin div to center both horizontal and vertical
body: <p>I cant margin the div id by : game-area to center horizontal and vertical.</p>
  
  <p>It need be work at cross platform.
  I tried to set marig-top or padding, but on margin the background image is goind down with div. When i use padding the site look different on all resolution.</p>
  
  <p>I also tried in css to set display as table and margin auto but it only align one dimension</p>
  
  <p>The page of website (after click "zagraj" the content is refresh and this refresh one need be margined) :</p>
  
  <p><a href="http://nwstudio.esy.es/panda/main/" rel="nofollow noreferrer">http://nwstudio.esy.es/panda/main/</a></p>
  
  <p>Phaser: </p>
  
  <pre><code>var game = new Phaser.Game(360,640,Phaser.CANVAS, 'game-area');
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;body&gt; 
      &lt;div id="main"&gt;
          &lt;CENTER&gt;
                  &lt;img src="img/background.png"/&gt;
          &lt;/CENTER&gt;
      &lt;center&gt;
          &lt;a href='#' id='run'&gt;&lt;img src="img/button_start.png"/&gt;&lt;/a&gt;
      &lt;/center&gt;
      &lt;/div&gt;
  
      &lt;div id="game-area"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      padding: 0px;
      margin: 0px;
      background-image: url('../img/background_second.png');
      height: 100vh;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      overflow-y: hidden;
      position: relative;
  }
  
  #game-area{
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align:middle;
  }
  
  #main{
      display: block; background-color: #FFF; width: auto; height: 6000px;
  }
  
  @media only screen and (max-device-width: 1024px) {
      canvas{
          width: 100% !important;
          height: 100% !important;
      }
  
  
  @media only screen and (device-width: 412px) {
      canvas{
          width: 100% !important;
          height: 80% !important;
          margin-top: -12px;
      }
  }
  </code></pre>