如何在div与section之间居中Image Container且不改变容器尺寸

要实现头像容器悬浮在导航栏与下方灰色box之间且居中，同时不改变box尺寸，可按以下步骤修改代码：

核心思路 #

• 将头像容器从box中独立出来，通过负margin实现悬浮效果
• 保持box原有布局不受影响，仅调整其顶部内边距预留头像空间

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .avatar-container {
      position: relative;
      margin-top: -48px; /* 头像高度的一半，实现居中悬浮 */
      margin-bottom: -48px; /* 抵消头像高度，避免影响box布局 */
      z-index: 10; /* 确保头像在导航和box之上 */
    }
  </style>
</head>

<body style="height: fit-content;">
  <nav class="navbar" role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
    <div class="navbar-brand">
      <div class="navbar-item">
        <img src="assets/Logo.png">
      </div>
    </div>

    <div id="navbarBasicExample">
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
                            Language
                        </button>
            <button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
                            Profile
                        </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <!-- 独立的头像容器 -->
  <div class="avatar-container">
    <figure class="image is-96x96" style="margin: auto;">
      <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
    </figure>
  </div>
  <div class="box" style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 2%; padding-top: 48px;">
    <!-- 这里可以添加box内的其他内容 -->
  </div>
</body>
</html>

关键修改点说明 #

• 新增.avatar-container类，通过margin-top: -48px（头像高度96px的一半）让头像向上偏移，刚好卡在导航栏与box中间
• 给box添加padding-top: 48px，预留头像占用的垂直空间，避免box内容被头像遮挡
• 设置z-index:10确保头像显示在最上层，不会被下方box覆盖

内容的提问来源于stack exchange，提问作者Taha Habib