title: How to horizontally and vertically center a div in the most efficient way possible?
body: <p>I apologize in advanced because I know this is a very basic, newbie mistake - but no matter what I add to this, my main container will not center in the page. I know there's plenty of ways to achieve this goal, but ultimately I'm trying to practice 'good coding' habits, and making this efficient as possible ( as opposed to many margins and paddings ). The goal is to eventually have it look like this:</p>
  <p><a href="https://i.stack.imgur.com/z9szT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z9szT.png" alt="enter image description here" /></a></p>
  <p>Here's my code ( so far ):</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, width=device-width&quot;/&gt;
   
  &lt;!-- BROWSER TITLE --&gt;
  &lt;title&gt;cookiess&lt;/title&gt;
  &lt;!-- END OF BROWSER TITLE --&gt;
   
  &lt;!-- BROWSER ICON --&gt;
  &lt;link rel=&quot;shortcut icon&quot; href=&quot;https://66.media.tumblr.com/e948812964cb16505f4cd4f894344288/672e88b582120b94-84/s540x810/9301ad0a7a1dc0235256ca2aa89738258b0383a5.png&quot;&gt;
  &lt;!-- END OF BROWSER ICON --&gt;
   
  &lt;!-- FONTS --&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Bowlby+One&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,900,700,700italic,500italic,500' rel='stylesheet' type='text/css'&gt;
  &lt;!-- END OF FONTS --&gt;
  
  &lt;!-- SMOOTH SCROLL SCRIPT --&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- END OF SMOOTH SCROLL SCRIPT --&gt;
  
  &lt;!-- SCROLL TO TOP BUTTON --&gt;
  &lt;button onclick=&quot;topFunction()&quot; id=&quot;stt&quot; title=&quot;Go to top&quot;&gt;Top&lt;/button&gt;
  &lt;!-- END OF SCROLL TO TOP BUTTON --&gt;
  
  &lt;style type=&quot;text/css&quot;&gt;
  
  body { background-color:#e6eaeb;
  color:#e6eaeb;
  font-family:'Roboto', sans-serif;
  font-size:10px;
  text-align:left;
  word-spacing:3px;
  text-transform:uppercase; }
  
  /* SELECTION */
  ::selection { background:#ff40f3; }
  ::-moz-selection { background:#ff40f3; }
  /* END OF SELECTION */
   
  /* SCROLLBAR */
  ::-webkit-scrollbar-thumb { background:#ff62f5;
  border-radius:25px;linear-gradient(to bottom, #b1e0f5 , #ffc4f6);
  width:8px;
  height:5px; }
   
  ::-webkit-scrollbar { background:#292929;
  border-radius:25px;
  height:5px;
  width:8px; }
  /* END OF SCROLLBAR */
  
  /* SCROLL TO TOP BUTTON */
  #stt { position: fixed; /* Fixed/sticky position */
  z-index:99999999999999;
  display: none; /* Hidden by default */
  top:613px; /* Place the button at the bottom of the page */
  left:1029px; /* Place the button 30px from the right */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  font-family:'Bowlby One', cursive;
  background-color: #02afff; /* Set a background color */
  color:#e6eaeb;
  cursor: pointer; /* Add a mouse pointer on hover */
  padding:8px;
  border-radius: 15px; /* Rounded corners */
  text-transform:uppercase;
  text-align:center;
  font-size: 9px; /* Increase font size */ }
  /* END OF SCROLL TO TOP BUTTON */
  
  .maincontainer { background-color:#313131;
  width:785px;
  height:472px;
  color:#313131;
  border-top:25px solid #02afff;
  border-bottom:25px solid #02afff;
  margin:auto;
  -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
  -moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
  box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }
  
  #wave { position:fixed;
  z-index:-100;
  width:100%;
  bottom:-3px;
  background-repeat:repeat-x;
  left: 0px;
  right: 0px; }
  
  &lt;/style&gt;
  &lt;/head&gt;
    &lt;body&gt;
    &lt;div id=&quot;wave&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 320&quot;&gt;
           &lt;path fill=&quot;#ffa6f9&quot; fill-opacity=&quot;1&quot; d=&quot;M0,192L34.3,176C68.6,160,137,128,206,149.3C274.3,171,343,245,411,256C480,267,549,213,617,192C685.7,171,754,181,823,186.7C891.4,192,960,192,1029,202.7C1097.1,213,1166,235,1234,240C1302.9,245,1371,235,1406,229.3L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z&quot;&gt;&lt;/path&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
   &lt;div class=&quot;maincontainer&quot;&gt;Hi there!&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>