-1

<!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.

pic

Rana
  • 2,500
  • 2
  • 7
  • 28
Jack Owen
  • 1
  • 4
  • Flex-box will be best and easy shot for you but you can use translate property too to center – Rana Nov 10 '21 at 19:00

3 Answers3

0

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%);
tkausl
  • 13,686
  • 2
  • 33
  • 50
0

From the .container class remove, the margins

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

Add

transform: translate(-50%, -50%);
atiqorin
  • 446
  • 3
  • 13
0

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;
  }
herdeybayor
  • 9
  • 4