页面图片时而完全居中时而仅水平居中的原因咨询（未改代码）

未修改代码的情况下，页面加载时图片有时能同时水平垂直居中，有时却只实现水平居中，两种状态如下：

图片完全居中状态 #

图片仅水平居中状态 #

现有代码 #

CSS 代码

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

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

HTML 代码

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

问题原因 #

这种不稳定的情况核心是容器高度计算时机不对：

1. .wavySectionContainer 使用 height:100%，但如果父元素未设置明确高度，容器高度无法正确继承，导致 top:50% 基于的高度不是预期的视口高度，垂直居中失效。
2. 图片加载顺序影响：如果图片在容器渲染后才加载完成，容器会被图片撑开，但初始布局已完成，垂直居中的计算不会自动更新。

解决办法 #

方法1：固定容器高度为视口高度

把容器的 height:100% 改成 min-height:100vh，确保容器高度始终等于视口高度，不受父元素或内容加载影响：

.wavySectionContainer {
  min-height: 100vh; /* 替换原 height:100% */
  width: 100%;
  background-color: var(--primary);
  position: relative;
}

方法2：监听图片加载触发重布局

给图片添加加载完成事件，强制容器重新计算高度：

<img class="sun" src="public/sun.png" alt="Wave" onload="document.querySelector('.wavySectionContainer').style.height = 'auto';">

方法3：改用flex布局（更稳定）

用flexbox替代绝对定位实现居中，这种方式不受内容加载顺序影响，稳定性更高：

.wavySectionContainer {
  min-height: 100vh;
  width: 100%;
  background-color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.aboutMe,
.sun {
  position: absolute; /* 保留绝对定位维持元素重叠，不需要可删除 */
}

内容的提问来源于stack exchange，提问作者Henrique B