How do I center this div on the screen? The positioning seems to be off by a little bit-CodePudding

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: #7a64fa;
    }
    
    .container {
      background-color: #ffffff;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
      padding-top: 75px;
      padding-right: 50px;
      padding-bottom: 75px;
      padding-left: 50px;
      border-radius: 10px;
    }
    
    label {
      font-size: 25px;
      font-family: "Lucida Console", "Courier New", monospace;
    }
    
    input {
      border-radius: 5px;
    }
    
    .ftm {
      display: inline-block;
    }
  </style>
  <meta charset="ISO-8859-1">
  <title>Feet to Meter</title>
</head>

<body>
  <div class="container">
    <div class="ftm">
      <label>Feet</label><br /> <input style="height: 40px;" type="number" name="feet">
    </div>
    <div class="ftm">
      <label>Meter</label> <br /> <input style="height: 40px;" type="number" name="meter">
    </div>
  </div>

</body>

</html>

I was looking to see why the container DIV wont fully center on the screen. I have tried to adjust the css for the container but cant seem to get the div to stay in the center. It might have something to do with the padding as well.

CodePudding user response：

Looks like you're trying to center the div using

  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;

This doesn't work because the div doesn't have dimensions 100x200. Use relative transform instead:

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

CodePudding user response：

From the .container class remove, the margins

margin-top: -50px; // remove
margin-left: -100px;  // remove

Add

transform: translate(-50%, -50%);

CodePudding user response：

remove margin-left from .container and add transform: translateX(-50%); Visit translate() by mdn to know more about css translate

      .container {
    background-color: #ffffff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -50px;
    /* margin-left: -100px; */
    padding-top: 75px;
    padding-right: 50px;
    padding-bottom: 75px;
    padding-left: 50px;
    border-radius: 10px;
  }

CodePudding user response：

A extra container with little bit change will work out with display: flex. You can explore many properties of flex like justify-content, align-items... much more.

But putting display: flex on parent and margin: auto on child will center the child and let you escape some unwanted behaviors while centering with other flex properties.

body {
  background-color: #7a64fa;
  margin: 0;
}

.container1 {
  position: fixed;
  display: flex;
  height: 100vh;
  width: 100vw;
}

.container {
  background-color: #ffffff;
  margin: auto;
  padding: 75px 50px;
  border-radius: 10px;
}

label {
  font-size: 25px;
  font-family: "Lucida Console", "Courier New", monospace;
}

input {
  border-radius: 5px;
}

.ftm {
  display: inline-block;
}

<div class="container1">
  <div class="container">
    <div class="ftm">
      <label>Feet</label><br /> <input style="height: 40px;" type="number" name="feet">
    </div>
    <div class="ftm">
      <label>Meter</label> <br /> <input style="height: 40px;" type="number" name="meter">
    </div>
  </div>
</div>