如何在Grid布局的div中定位按钮？需居右且垂直居中

你遇到的问题根源在于绝对定位的参考基准：当子元素用position: absolute时，会向上寻找最近的设置了position: relative/absolute/fixed的祖先元素作为定位基准，如果没有这样的祖先，就会以body为基准。

要实现按钮在父div右侧且垂直居中，只需两步修改：

1. 给父容器.productBox添加相对定位，让按钮以它为基准
2. 给按钮.cartButton设置绝对定位和垂直居中样式

修改后的完整代码 #

React组件代码（无需改动）

<div className={classes.productSection}>
      {available.map((product)=>
        (<div key={product.id} className={product.availability? classes.productBox : classes.notavailBox}>
          <h4>{product.user.companyName}</h4>
          <p>{product.user.district}</p>
          {product.availability && <button className={classes.cartButton}>Add</button> }
        </div>
        )
      )}
    </div>

修改后的CSS样式

.productSection {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 20% 20% 20%;
  justify-content: center;
  animation: append-animate .5s linear;
  margin-bottom: 1rem;
  
}
.productBox {
  white-space: nowrap;
  border: 1.5px solid gray;
  padding: 10px;
  overflow: hidden;
  border-radius: 12px;
  /* 添加相对定位，作为绝对定位的基准 */
  position: relative;
}
/* 新增按钮样式 */
.cartButton {
  position: absolute;
  right: 10px; /* 和父容器padding保持一致，避免贴边 */
  top: 50%;
  /* 通过transform向上偏移自身高度的一半，实现垂直居中 */
  transform: translateY(-50%);
}

补充说明 #

• position: relative不会改变父容器的布局，只是为内部绝对定位元素提供参考坐标
• top: 50%是让按钮顶部对齐父容器垂直中线，transform: translateY(-50%)则把按钮整体向上移动自身高度的一半，最终实现完全垂直居中
• 如果需要调整按钮和右侧的距离，修改right的值即可

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