我正在使用 Swiper 库创建轮播。 我想将我的卡片元素居中，但我做不到

Question

I am using Swiper Library to create carousel. i want to center my card element in center but i am not able to do. here is important component code please help me. i am using styled component with swiper library.

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>
  );
};

why my Wrapper div take this extra space. because of that next element is not visible on screen.

• Need output like this

Answer 1

You have to center card element in your parent element, or if your parent element is grid you can use justify-self: center; you can also try:

margin: 0 auto;

or center absolute with:

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