How to make a fixed position div in center

Question

I have two 50% width divs and want to make a div(which is inside one of them) to be position fixed and center.

I have created a codepen. Please have a look at it to get a better idea about the problem. Also I have embed my code here as well.

<div class="parent">
  <div class="first">
    <p>...</p>
  </div>
  <div class="second">
    <p>...</p>
    <div class="floating"></div>
  </div>
</div>

.parent {
  display: flex;
  width: 100%
}
p {
  color: #fff;
  padding: 20px;
}
.first {
    width: 50%;
    height: 100vh;
    background-color: #000;
}
.second {
    width: 50%;
    height: 100vh;
    background-color: #ddd;
}
.floating {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: fixed;
}

PS I know its possible with position sticky but I don't want to use it. You can add the below code in .floating class and it will be in center.

    position: sticky;
    margin: 0 auto;

Possible duplicate: https://stackoverflow.com/q/6794000/2444959 — Rúnar Berg, Jan 20 '21 at 16:21
If `.second` is also `fixed` you can position `.floating` relative to it. Will that work for you? — Rúnar Berg, Jan 20 '21 at 18:06
no `.second` is not fixed only the `.floating` inside it is `fixed` — mkamranhamid, Jan 21 '21 at 07:22

score 0 · Answer 1 · answered Jan 20 '21 at 16:17

0

Use transform: translate(-50%) with left: 50%:

.centered {
  background: forestgreen;
  width: 400px;
  height: 100px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="centered"></div>

`

answered Jan 20 '21 at 16:17

Rúnar Berg

4,229
1
22
38

this will make the `.floating` div to be in the page center not in the center of `.second` div – mkamranhamid Jan 20 '21 at 16:30
I’m not sure that is possible. `fixed` positioning sits on top of the *viewport*, unless there is an ancestor with a `fixed` position. You might need to use javascript to figure out the position you want and set the `right` and `top` properties accordingly: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#fixed_positioning – Rúnar Berg Jan 20 '21 at 17:59

score 0 · Answer 2 · answered Jan 20 '21 at 16:18

0

Set the position relative to second element and than set the box in center with position absolute like this:

.second {
    position: relative;
    width: 50%;
    height: 100vh;
    background-color: #ddd;
}
.floating {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

answered Jan 20 '21 at 16:18

xhuljan

41
5

this will make the `.floating` to have an absolute not **fixed** – mkamranhamid Jan 20 '21 at 16:52
It is fixed to the center related with parent – xhuljan Jan 20 '21 at 16:54
maybe my question didn't speak out like I want to. So basically I want the `.floating` div to be in the center of `.second` div with positon fixed – mkamranhamid Jan 20 '21 at 16:56
Position fixed with position element based on the body and not on the parent so the only way is to use position absolute since this element is inside .second element – xhuljan Jan 20 '21 at 16:57
yes you're right but I want to make the div that's inside to be position fixed. Using absolute will make its position static which I don't want – mkamranhamid Jan 20 '21 at 17:03

score 0 · Answer 3 · answered Jan 20 '21 at 18:00

0

You can use position:

<div class="parent">
 <div class="first">
 </div>
 <div class="second">
 </div>
 <div class="floating"></div>
</div>

You can show full code in JSFIDDLE

answered Jan 20 '21 at 18:00

this is the page center. I want to make it center aligned to `.second` div with `position: fixed` – mkamranhamid Jan 21 '21 at 07:24
Just try- left: 75%; and transform: translateX(-50%); for horizontal centre. It will work surely. – Ramesh Jan 21 '21 at 17:17

How to make a fixed position div in center

3 Answers3