我正在使用 Swiper 庫創建輪播。 我想將我的卡片元素居中，但我做不到

Question

我正在使用 Swiper 庫創建輪播。 我想將我的卡片元素居中，但我做不到。 這是重要的組件代碼，請幫助我。 我正在使用帶有 swiper 庫的樣式化組件。

const Wrapper = styled(motion.div)`
  height: 200px;
  min-width: 300px;
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  position: relative;

  &:hover ${Desc} {
    transform: translateY(0%);
  }
`;

const Card = () => {
  return (
    <Swiper pagination={true} modules={[Pagination]}>
      {sliderItems.map((item) => {
        return (
          <SwiperSlide key={item.id}>
            <Wrapper>
              <Title>{item.title}</Title>
              <Desc>{item.desc}</Desc>
              <Img src={item.img} />
            </Wrapper>
          </SwiperSlide>
        );
      })}
    </Swiper>
  );
};

為什么我的 Wrapper div 占用了這個額外的空間。 因為下一個元素在屏幕上不可見。

• 需要這樣的output

Answer 1

你必須在你的父元素中居中卡片元素，或者如果你的父元素是網格，你可以使用justify-self: center; 你也可以試試：

margin: 0 auto;

或中心絕對值：

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%)