top: 50% does not working when set to position relative

Question

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

Does this answer your question? [Why is is top:50% in css not working?](https://stackoverflow.com/questions/9765402/why-is-is-top50-in-css-not-working) — Heretic Monkey, Aug 30 '21 at 14:55

score 0 · Answer 1 · answered Aug 28 '21 at 10:22

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.

answered Aug 28 '21 at 10:22

Noex98

106
4

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

Johannes · Answer 2 · 2021-08-30T14:49:57.043

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>

top: 50% does not working when set to position relative

2 Answers2