CSS position relative top 50% of div doesn't work

Question

I have problem with positioning:

enter image description here

I cannot set exactly top: 50% and left: 50% on both photo and text because it isn't 50%. I try by hand set that 50% which is more like 46%.

When I change size of window text moves. I don't know what to Do and I am looking for answer for 2 hours

.photo-box {
  background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
  width: 100vw;
  text-align: center;
  font-size: 30px;
  padding-top: 70px;
  padding-bottom: 70px;
  margin-left: auto;
  margin-right: auto;
  color: #f0eeee;
  font-family: sans-serif;
  position: relative;
}

.tytul {
  display: flex;
  text-align: center;
  position: absolute;
  top: 46%;
  left: 45.3%;
}

.zdj-pierw img {
  border-radius: 100px;
  align-items: center;
  justify-content: center;
}

<div class="photo-box" style="">

  <div class="tytul">Strona WWW </div>
  <div class="zdj-pierw">
    <img src="https://picsum.photos/200/200/?random" width="200" height="200" />

  </div>


</div>

But you might find this useful - https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Paulie_D, Mar 21 '19 at 13:01
Read the big red error message when you remove the code block (the one that forced you to add it) — Pete, Mar 21 '19 at 13:05
Possible duplicate of [Position absolute but relative to parent](https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) — pringi, Mar 21 '19 at 13:20

score 0 · Accepted Answer · answered Mar 21 '19 at 13:20

You should be using flex properties on the parent, not just on the item you want to place.

I've also changed your border-radius to 50%, as this is a perfect round, no matter what the size of the image.

.photo-box {
  background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
  width: 100vw;
  font-size: 30px;
  padding-top: 70px;
  padding-bottom: 70px;
  color: #f0eeee;
  font-family: sans-serif;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.tytul {
  position: absolute;
}

.zdj-pierw img {
  border-radius: 50%;
}

<div class="photo-box" style="">
  <div class="tytul">Strona WWW </div>
  <div class="zdj-pierw">
    <img src="https://picsum.photos/200/200/?random" width="200" height="200" />
  </div>
</div>

Thank You very much – Paweł Developer Mar 21 '19 at 13:24 — Paweł Developer, Mar 21 '19 at 13:24

CSS position relative top 50% of div doesn't work

1 Answers1