使用grid居中div时尺寸过小，不使用absolute定位如何解决

你设置的justify-content: center会让grid的直接子元素以*收缩宽度（仅刚好容纳内部内容的宽度）*水平居中，因此会出现子元素尺寸比预期小的问题。你之前用绝对定位时通常会配合宽度规则，所以尺寸显示正常。

这里分两种常用场景提供修改方案：

• 场景1：希望购物车区域居中，同时有合理的最大宽度，避免宽屏显示过宽
  修改CSS如下：

  .center-cart-table {
    display: grid;
    place-content: center;
    /* 若需要垂直居中可额外设置容器高度，例如：min-height: 90vh; */
  }
  
  /* 给包裹购物车内容的直接子元素加样式，建议给该div新增.cart-wrapper类名来绑定样式更稳妥 */
  .center-cart-table > div {
    width: 100%;
    max-width: 1000px; /* 可根据设计需求调整最大宽度数值 */
    padding: 0 1.5rem;
    box-sizing: border-box;
  }
  

• 场景2：希望购物车区域直接撑满父容器的全部可用宽度
  直接修改.center-cart-table的配置即可：

  .center-cart-table {
    display: grid;
    justify-items: stretch; /* 替换原来的justify-content: center */
    align-content: center;
  }
  

建议给.center-cart-table内部的直接div新增类名cart-wrapper，后续样式绑定到该类名上，避免后续给容器新增子元素时样式冲突。

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