title: How to center the black box vertically and horizontally?
body: <p>I am trying to center the blackbox vertically and horizontally! For horizontal centering, I have tried <code>margin: auto</code> but it's not working on high resolutions. </p>
  
  <p>I am trying to make my hero area responsive. As I reduce the width of the window, the black box gets centered but at a high width it stays left.</p>
  
  <p>Also please help me align it horizontally! Please also help me in adjusting my background!</p>
  
  <p>Hence, my problems are :-</p>
  
  <ol>
  <li>I want to  center the blackbox vertically and horizontally!</li>
  <li>Help me in adjusting red background to make it responsive</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header{
   width: 100%;
   height: 100px;
   background: rgba(0,0,0,0.7);
  }
  
  #heroarea{
   max-width: 100%;
   height: calc(100vh - 100px);
   background:red;
   position: relative;
  }
  
  #hero-intro-box{
   background: rgba(0,0,0,0.8);
   width: 100%;
   max-width: 800px;
   height: auto;
   border: 1px solid white;
   border-radius: 15px;
   padding: 10px;
   padding-bottom: 30px;
   margin: auto;
  
  }
  
  #hero-intro-box h1{
   color: white;
   text-align: center;
   padding-top: 3%;
  }
  
  #hero-intro-box p{
   color: white;
   margin: 15px;
   padding: 3%;
   padding-top: 2%;
  }
  
  #hero-intro-box #book-now-button{
   height: 50px;
   width: 150px;
   background: rgba(255,255,255,0.5);
   text-align: center;
   border-radius: 15px;
   border: 2px solid darkgrey;
   margin: auto;
  }
  
  @media (max-width: 400px) {
   #heroarea{
    height: 600px;
   }
  
   #hero-intro-box{
    height: auto;
    margin-bottom: 30px;
    position: relative;
    top: 0px;
    bottom: 0px;
   }
  
  }
  
  @media (min-width: 550px) {
   #heroarea{
    height: calc(100vh - 100px);
   } 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /&gt;
  
    &lt;div id="header"&gt;
        &lt;div class="container"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="heroarea"&gt;
        &lt;div class="container"&gt;
            &lt;div  id="hero-intro-box" class="ten columns"&gt;
                &lt;h1&gt;Enjoy world-class Cuisines&lt;/h1&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
                &lt;div id="book-now-button"&gt;Book us now!!&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>