React仿ChatGPT聊天页面开发求助：侧边栏切换按钮垂直居中问题

要让切换按钮始终保持垂直居中且不随聊天内容滚动，核心是将按钮从滚动流中脱离，并基于视口高度进行定位。以下是修改后的实现：

修改后的代码 #

<div style={{ display: 'flex', height: '100vh', position: 'relative', overflow: 'hidden' }}>
  {/* 侧边栏 */}
  <div className={`ui left demo vertical sidebar labeled icon Grid ${visible ? 'visible' : ''}`} 
    style={{paddingTop:'1%', width: '17%', paddingLeft:'1%', paddingRight:'1%', overflowX:'hidden', backgroundColor:'white'}}>
    <Grid>
      <Leftbar />
    </Grid>
  </div>

  {/* 垂直居中的切换按钮 */}
  <Icon 
    onClick={handleToggle} 
    name={visible ? 'chevron right' : 'chevron left'} 
    style={{ 
      position: 'absolute',
      top: '50%',
      transform: 'translateY(-50%)',
      left: visible ? '17%' : '0',
      zIndex: 1000,
      cursor: 'pointer',
      padding: '0 8px',
      backgroundColor: 'white', // 可选：添加背景色避免被聊天内容遮挡
      borderRadius: '4px'
    }} 
  />

  {/* 主内容区 */}
  <div className="pusher" style={{ flex: 1, overflow: 'auto' }}>  
    <Chat />
  </div>
</div>

关键调整说明 #

• 父容器布局：设置height: 100vh让容器占满整个视口高度，position: relative为按钮的绝对定位提供参考基准。
• 按钮定位：使用position: absolute脱离文档流，top: 50% + transform: translateY(-50%)实现精准垂直居中；根据侧边栏的显示状态动态调整left值，确保按钮始终处于侧边栏边缘位置。
• 主内容区滚动：给pusher添加overflow: auto，让聊天内容在自身区域内滚动，不会影响按钮的位置。
• 层级与交互优化：设置zIndex: 1000确保按钮在最上层，添加padding和背景色提升点击体验。

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