Question 186730 in Html Question posted in
Some basic documentation can be found here.

Html – Why this image is sometimes centered and sometimes not?

I didn’t change anything in the code.

Sometimes when I load the page the image is centered horizontally and vertically, but sometimes it is centered only horizontally.

screenshot 1

screenshot 2

.wavySectionContainer {
  height: 100%;
  width: 100%;
  background-color: var(--primary);
  position: relative;
}

.aboutMe,
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

      <div class="wavySectionContainer">
        <img class="sun"  src="public/sun.png" alt="Wave">
        <p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
Tags:

2

Answers


  1. 0

    Use height 100vh (viewport height) and width 100vw(viewport width)
    OR
    use fixed height and width in px(pixels) values, then you will get desired output.

    .wavySectionContainer {
  height: 100vh;
  width: 100vw;
  background-color: blue;
  position: relative;
}

.aboutMe,
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}
          <div class="wavySectionContainer">
        <img class="sun"  src="https://images.vexels.com/media/users/3/147002/isolated/lists/ebeb92f867932e57e096ebc64a3f884f-abstract-sunshine-rays-icon.png" alt="Wave">
        <p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    Login or Signup to reply.
  2. 0

    Try this it will work fine.

    .wavySectionContainer {
  height: 100vh;
  width: 100%;
  background-color: blue;
  position: relative;
}

.aboutMe,
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <div class="wavySectionContainer">
        <img class="sun"  src="https://i.ibb.co/C23WVJ2/pngegg.png" alt="Wave">
        <p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search