Why image is not centering accurately

The issue you are having is because the left/right/top/bottom positions all move an element based on its left/right/top/bottom most point. so when you say "left 50%" you are really saying to put the left edge of this element 50% of the parent's width from the parent's left side.

To guarantee it's properly centered you can add a CSS3 Transform property Translate Translate shifts X and Y based on the dimensions (width when translating x, and height when translating y) of the object it's applied to so this line would shift your item's left half of its width.

transform:translatex(-50%)

you would want this on your img tag along with the left:50%

Use display: flex; on top-container

overlay {
  /*display: none;*/
  position: fixed;
  /* Position fixed so its always in front of us*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* So model will stay ontop of everything*/
  background-color: rgba(0, 0, 0, 0.5);
}

#modal {
  max-width: 600px;
  height: 300px;
  margin: auto;
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.website-content {
  height: 1000vh;
}

#modal .top-container {
  background-color: rgb(56, 163, 165);
  width: 600px;
  height: 100px;
  justify-content: center;
  align-items: center;
}

.top-container img {
  margin: auto;
}

.bottom-container {
  position: relative;
  background-color: rgb(128, 237, 153);
  height: 200px;
}

.top-container {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <button id="show-modal-btn">Show modal</button>

  <div id="overlay">
    <div id="modal">
      <div id="modal-form">
        <div class="top-container"><img id="icon" src="https://dummyimage.com/90/000/fff" width="90px"></div>
        <div class="bottom-container">
          <label for="email-input"></label>
          <input id="email-input" type="email" placeholder="Enter your email">
        </div>
      </div>
      <button id="close-modal-btn">Close Modal</button>
    </div>
  </div>

  <div class="website-content"></div>

  <script src="index.js"></script>

</body>

</html>

Why image is not centering accurately

Related

Recent Posts