中心 DIV 包含具有绝对显示的元素

Question

我正在尝试在 React 中复制以下设计：

这是我目前所拥有的：

这是它的代码：

import React, {  useState } from "react";
import "./DisplayCards.css";

type DisplayCardsProps = {
  images: string[];
  group: number;
};

const DisplayCards: React.FC<DisplayCardsProps> = ({ images, group }) => {
  const [currentGroup, setCurrentGroup] = useState(0);
  const startIndex = currentGroup * group;

  const firstGroup = images.slice(0, startIndex);
  const secondGroup = images.slice(startIndex, startIndex + group);
  const thirdGroup = images.slice(startIndex + group);

  return (
    <div>
      <div className="main-cards">
        {secondGroup.map((name, index) => {
          return (
            <img
              key={index}
              src={name}
              style={{
                position: "absolute",
              }}
            />
          );
        })}
      </div>

      <div>
        <button
          onClick={() =>
            setCurrentGroup((prevGroup) =>
              thirdGroup.length !== 0 ? prevGroup + 1 : prevGroup
            )
          }
        >
          Shift Group Forward
        </button>
        <button
          onClick={() =>
            setCurrentGroup((prevGroup) =>
              firstGroup.length !== 0 ? prevGroup - 1 : prevGroup
            )
          }
        >
          Shift Group Backward
        </button>
      </div>
      <div style={{ padding: "200px" }}></div>

      <div className="grid-container">
        <div className="first-group">
          {firstGroup.map((name, index) => {
            return (
              <img
                key={index}
                src={name}
                width={157}
                height={219}
                style={{
                  position: "absolute",
                  left: `${10 * index}px`,
                }}
              />
            );
          })}
        </div>

        <div className="third-group">
          {thirdGroup.map((name, index) => {
            return (
              <img
                key={index}
                src={name}
                width={157}
                height={219}
                style={{
                  position: "absolute",
                  left: `${10 * index}px`,
                  marginLeft: "500px",
                }}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default DisplayCards;

还有 CSS：

.main-cards {
  display: flex;
  justify-content: center;
}

.grid-container {
  display: flex;
  justify-content: space;
}

我不知道如何将卡片放在底部的中心。此外，顶部的卡片是三个图像叠在一起。我尝试将它们展开：

        {secondGroup.map((name, index) => {
          return (
            <img
              key={index}
              src={name}
              width={157}
              height={219}
              style={{
                position: "absolute",
                left: `${30 * index}px`,
              }}
            />
          );
        })}

哪种有效，但它没有完美居中。它偏离了大约 50px 之类的。如何将所有卡片居中并像我尝试复制的设计中所示那样显示它们？

最后一个问题，当我向前移动卡片时（即单击

Shift Group Forward

按钮），如何使左侧的卡片堆像这个视频中那样向后生长？