如何将固定定位的悬浮按钮调整至页面左侧垂直居中？

你当前代码里的margin-top不生效，是因为同时设置了bottom:20px——这个属性会让浏览器优先基于视口底部定位元素，直接抵消了margin-top的作用。要实现左侧垂直居中，只需调整定位属性即可：

修改后的CSS代码 #

#cbtn{
    position:fixed;
    width:60px;
    height:60px;
    /* 移除bottom属性，改用top+transform实现垂直居中 */
    top: 50%;
    left: 20px; /* 控制按钮与左侧的距离，可按需调整 */
    transform: translateY(-50%); /* 向上偏移自身高度的50%，实现精准垂直居中 */
    background-color:#5468ff;
    color:white;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    cursor: pointer; /* 可选：添加鼠标悬停指针效果，提升交互感 */
}

核心逻辑说明 #

• top:50%：将按钮顶部定位到视口垂直方向的中点位置
• transform: translateY(-50%)：让按钮向上偏移自身高度的一半，使按钮中心点与视口垂直中线对齐，实现完美居中
• left:20px：自定义按钮与左侧边缘的距离，可根据页面布局调整数值

无需修改的HTML结构 #

<table id="cbtn" >
  <tr onclick="window.open('tel:7204968541');">
    <td>
      <a href="#" class="btn-xl" onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
  <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
    </td>
  </tr>
</table>

注：用<table>作为按钮容器不够语义化，建议后续可以替换为<div>，但仅从样式需求来看，上述CSS修改已能实现目标效果。

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