我沒有修改任何代碼。

有時當我加載頁面時，圖像水平和垂直居中，但有時它只水平居中。

截圖1

截圖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>

試試這個，效果會很好。

.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>

使用高度100vh(視口高度)和寬度100vw(視口寬度) 運籌學 使用固定的高度和寬度像素值，然后你會得到想要的輸出。

.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>