title: My div elements are not completely centered. (They look like they are but are not.)
body: <p>I am making my own login page. Just an HTML style for now. </p>
  
  <p>As you might be able to see, via the jsfiddle below, the file I made is slightly off center. I want to completely center everything both vertically and horizontally.</p>
  
  <p>Here is the JsFiddle, <a href="https://jsfiddle.net/BeastFox/jgLsdmkk/" rel="nofollow noreferrer">https://jsfiddle.net/BeastFox/jgLsdmkk/</a></p>
  
  <p>Here is the source code,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Login&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
  &lt;div class="LoginBox" style=""&gt;
  &lt;div class="element_wrapper"&gt;
   &lt;a class="Login"&gt;Login&lt;/a&gt;
  
  
      &lt;input type="text" name="" class="username" placeholder="Username"&gt;
      &lt;input type="password" name="" class="password" placeholder="Password"&gt;
  
  
      &lt;class&gt;
      &lt;center&gt;&lt;button class="btn" onclick="myFunction()"&gt;Login&lt;/button&gt;
          &lt;a href="https://www.beastfox.com"&gt;&lt;input type="submit" value="Create" class="btn2"/&gt;&lt;/a&gt;
  
  
  
  
  &lt;/center&gt;
          &lt;/class&gt;
  &lt;/div&gt;
   &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>body,
  html 
  {
    background:
      linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
      linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
      linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
      linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
      linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
      linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
  
    overflow-x: hidden;
    overflow-y: hidden;
  }
  
  .username {
    display: block;
    margin: 0 auto;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 5px;
    transition: 500ms all ease;
    border: 1px solid #333;
    margin-bottom: 10px;
    text-align: center;
    vertical-align: middle;
  }
  
  .username:hover {
    box-shadow: 0px 0px 4px #000;
  }
  
  .password {
    padding-top: 3;
    text-align: center;
    display: block;
    margin: 0 auto;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 5px;
    transition: 500ms all ease;
    border: 1px solid #333;
  }
  
  .password:hover {
    box-shadow: 0px 0px 4px #000;
  }
  
  .LoginBox {
    top: 40%;
    left: 50%;
    margin: -100px 0 0 -150px;
    position: fixed;
    padding-top: 50 auto;
    width: 300px;
    height: 300px;
    padding: 25px;
    background-color: firebrick;
    z-index: -3;
    box-shadow: 0px 0px 9px #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .Login {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFF;
    margin-bottom: 1em;
    border-bottom: 2px solid #ccc;
  }
  
  .btn {
      margin-top: 3em;
      top 70%;
      width: 70px;
      height: 30px;
      background-color: #333;
      border: none;
      color: #ccc;
      cursor: pointer;
      margin-right: 2em;
  }
  .btn:hover {
      box-shadow: 0px 0px 4px #000;
  }
  .btn:active {
      box-shadow: 0px 0px 5px #000;
  }
  .btn:focus {outline:none;}
  .btn2 {
      margin-top: 3em;
      top 70%;
      width: 70px;
      height: 30px;
      background-color: #ccc;
      border: none;
      color: #333;
      cursor: pointer;
  }
  .btn2:hover {
      box-shadow: 0px 0px 4px #000;
  }
  .btn2:active {
      box-shadow: 0px 0px 5px #000;
  }
  </code></pre>