CSS元素定位问题：作品集页面头像无法居中和位于header下方

• 先检查你的header布局：如果header用了position: fixed或absolute，它会脱离文档流，导致头像这类正常流元素会跑到header下面被覆盖，或者位置不对。这时候要么把header改成position: relative/sticky，要么给头像容器加margin-top，值等于header的实际高度，确保它被推到header下方。

• 最简单的居中+下方定位方式用flex布局：
  给头像的父容器加以下样式：

  .avatar-wrap {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-top: 80px; /* 替换成你header的高度，比如header高60px就写60px */
  }
  

  头像本身保持默认定位即可，不用加复杂的position属性：

  .avatar {
    width: 150px;
    height: 150px;
    /* 圆形头像可以加border-radius: 50%; */
  }
  

• 要是想用position实现：
  给头像设置相对定位，配合平移实现居中，同时加margin-top避开header：

  .avatar {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 80px; /* 匹配header高度 */
    width: 150px;
    height: 150px;
  }
  

• 额外排查：如果页面里有元素用了float属性，记得给父容器清除浮动（比如加clear: both或者用伪元素::after { content: ""; display: block; clear: both; }），避免文档流混乱导致定位失效。

内容的提问来源于stack exchange，提问作者Luan Araujo