如何实现圆形半悬于Footer上方的页脚效果？

要让圆形元素一半悬浮在页脚顶部上方，只需调整.Circle的垂直位置即可，以下是具体解决方案：

修改后的完整代码 #

CSS 部分

.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  background-color: #ffde6a;
  color: #262626;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Circle {
  height: 66px;
  width: 66px;
  background-color: #bbb;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  /* 核心：向上移动自身高度的一半 */
  transform: translateY(-50%);
  /* 也可替换为负外边距：margin-top: -33px; */
}

.input-icon {
  display: flex;
  align-items: center;
}

HTML 部分（无需修改）

<div class="Footer">
  <div class="Circle">
    <div class="input-icon">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="#262626" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z" stroke="none" stroke-width="1.5"stroke-linejoin="round"/>
        <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="none" stroke-width="1.5"/>
      </svg>
    </div>
    Profile
  </div>
</div>

关键逻辑说明 #

• transform: translateY(-50%)：让圆形元素向上移动自身高度的50%，刚好实现一半悬浮在页脚上方，这种方式无需手动计算像素值，后续修改圆形尺寸时能自动适配。
• 给.Circle添加flex-direction: column等属性，确保内部图标和文字在圆形中垂直居中，优化视觉呈现。
• 若偏好使用负外边距，直接设置margin-top: -33px（33px为圆形高度66px的一半）也能达到相同效果，但需手动对应圆形高度调整数值。

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