1

The top position of the frame1 remain the same even already set top: 50%. The containing block is body tag. Not understand why it is not working?

<html lang="en">
  <body>        
    <div class="frame1">
      <div class="frame">
        <div class="center">
        </div>
      </div>
    </div>
  </body>
</html>

CSS file:

.frame1 {
    position: relative;
    top: 50%;
    left: 50%;
    
    width: 600px;
    height: 600px;
    background: orangered;
    border: 2px solid blueviolet;
}
Peter Csala
  • 17,736
  • 16
  • 35
  • 75
Smiley
  • 11
  • 1

2 Answers2

0

Position relative means, that the position is relative to where the item would be in the document by default.

Hence top: 50%; left: 50%; doesn't do anything. Because it's 50 percent something undefined.

Noex98
  • 166
  • 6
  • This is wrong. 50% means half the parent width/height. It has nothing to do with the item to be positioned itself. – TYeung Aug 30 '21 at 15:09
0

Your 50% setting for top doesn't have a reference height: The parent element in your case is body, with no defined height. So the browser doesn't "know" of what to calculate the 50%. If you add height: 100% to body and html (i.e. parent of body), your setting will have an effect:

html,
body {
  height: 100%;
  margin: 0;
}

.frame1 {
  position: relative;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: orangered;
  border: 2px solid blueviolet;
}
<html lang="en">

<body>
  <div class="frame1">
    <div class="frame">
      <div class="center">
      </div>
    </div>
  </div>
</body>

</html>
Johannes
  • 64,305
  • 18
  • 73
  • 130