My div elements are not completely centered. (They look like they are but are not.)

Question

I am making my own login page. Just an HTML style for now.

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.

Here is the JsFiddle, https://jsfiddle.net/BeastFox/jgLsdmkk/

Here is the source code,

<!DOCTYPE html>
<html>

  <head>
    <title>Login</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  </head>

  <body>

<div class="LoginBox" style="">
<div class="element_wrapper">
 <a class="Login">Login</a>


    <input type="text" name="" class="username" placeholder="Username">
    <input type="password" name="" class="password" placeholder="Password">


    <class>
    <center><button class="btn" onclick="myFunction()">Login</button>
        <a href="https://www.beastfox.com"><input type="submit" value="Create" class="btn2"/></a>




</center>
        </class>
</div>
 </div>

  </body>

</html>

And here is the CSS:

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;
}

score 2 · Answer 1 · answered Mar 22 '17 at 17:20

2

Instead of those negative margins, use these settings:

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

https://jsfiddle.net/ccLg8agu/1/ (updated, didn't contain all the right settings before)

answered Mar 22 '17 at 17:20

Johannes

64,305
18
73
130

Plus 1 for disregarding all the clutter (css / html) – Jasper N. Brouwer Mar 22 '17 at 17:40

score 1 · Accepted Answer · answered Mar 22 '17 at 17:17

Instead of top: 40% and negative, fixed margins, you want to use a combination of top: 50%; left: 50%; transform: translate(-50%,-50%); to absolutely center .LoginBox.

You can read more about centering techniques here https://www.w3.org/Style/Examples/007/center.en.html

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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  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;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Login</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  </head>

  <body>

    <div class="LoginBox" style="">
      <div class="element_wrapper">
        <a class="Login">Login</a>


        <input type="text" name="" class="username" placeholder="Username">
        <input type="password" name="" class="password" placeholder="Password">


        <class>
          <center>
            <button class="btn" onclick="myFunction()">Login</button>
            <a href="https://www.beastfox.com">
              <input type="submit" value="Create" class="btn2" />
            </a>




          </center>
        </class>
      </div>
    </div>

  </body>

</html>

score 0 · Answer 3 · answered Mar 22 '17 at 17:21

The problem is that you are also adding padding to the .LoginBox which gets added to the overall width. So the -150px margin will not be correct.

One way is to use *{box-sizing:border-box} which will make the border and padding to be container in the width (they eat from the width instead of adding to it).

Updated demo at https://jsfiddle.net/jgLsdmkk/1/

Another is to adjust your values accordingly (by taking the padding into consideration when calculating the size of the element)

My div elements are not completely centered. (They look like they are but are not.)

3 Answers3