Position a div in percentage relative to parent div

Question

I'm trying to create a scene in css and for that I am using position: relative and position:absolute. My problem is that I'm trying to set my child div to the center of my parent div using some css properties and it doesn't seem to work.

Here's what I do :

.game {
  background-color: #5386e4;
  overflow: hidden;
  position: relative;
}

.fish {
  height: 320px;
  width: 300px;
  position: absolute;
  transform-origin: center; // Here I am trying to set the origin of the div in its center.
  top: 50%;  // And here I am trying to center vertically the child div in the parent div.
  left: 50%; // Same here but horizontally
  z-index: 10000;
  background-color: #10121b;
}

Here's what it does

Note that my div .game is also child of another div. Let me know if you need to see more of what is going on in my html or css.

Can I see some of the HTML code. I think you can achieve this using flex — Chichebe, Nov 25 '21 at 23:18

score 2 · Answer 1 · answered Nov 25 '21 at 23:25

2

The easiest way is to add to the .fish div:

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

answered Nov 25 '21 at 23:25

Alecx

79
1
4

score 0 · Answer 2 · answered Nov 25 '21 at 23:25

0

You can use flex to achieve this

.game {
  background-color: #5386e4;
  overflow: hidden;
  position: relative;
  height: 560;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fish {
  height: 320px;
  width: 300px;
  background-color: #10121b;
}

Making the "display" => "flex" and then using "justify-content" => "center" && "align-items" => "center" will center the child container perfectly

answered Nov 25 '21 at 23:25

Chichebe

580
5
12

I could have used `display: flex` to put the child div in the center of the parent div but I want my child div position to be relative to te parent one. That's why I want to use percentage and positions `absolute` and `relative` – Scotty Nov 25 '21 at 23:34
There's probably a 100 ways to go about achieving your desired result. The solution I gave you still achieves the result in relation to the parent div, same with the solution from Beki – Chichebe Nov 25 '21 at 23:47

Beki · Answer 3 · 2021-11-25T23:28:08.693

Use grid to center anything with place-content:center;

Make sure the parent element has enough height to center its children.

body {
    display: grid;
    min-height: 100vh;
    margin: 0;
}
.game {
    background-color: #5386e4;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
}

.fish {
    height: 320px;
    width: 300px;
    background-color: #10121b;
}

<body>
    <div class="game">
        <div class="fish"></div>
    </div>
</body>

score -1 · Accepted Answer · answered Nov 25 '21 at 23:29

You can use transform property:

.fish {
      height: 320px;
      width: 300px;
      position: absolute;
      transform-origin: center; // Here I am trying to set the origin of the div in its center.
      top: 50%;  // And here I am trying to center vertically the child div in the parent div.
      left: 50%; // Same here but horizontally
      transform: translate(-50%, -50%);
      z-index: 10000;
      background-color: #10121b;
    }

Or you can also make your parent div flex and use flex-wrap: wrap; justify-content:center; and align-items:center; without making child absolute

Position a div in percentage relative to parent div

4 Answers4