Как отцентрировать элементы в Swiper React?

Question

[Дмитрий Путилов]

Всем привет, есть вот такой вот код

import React from 'react';
import {Swiper, SwiperSlide} from "swiper/react";
import Image from "../../../../UI/Image";
import product_bitrix from "../../../../image/mainPage/itProducts/bitrix.png";
import product_amo from "../../../../image/mainPage/itProducts/amoCRM.png";
import product_nemind from "../../../../image/mainPage/itProducts/nemind.png";
import product_bitrix24 from "../../../../image/mainPage/itProducts/bitrix24.png";
import product_smsru from "../../../../image/mainPage/itProducts/smsru.png";
import arrow from '../../../../image/icon/arrow.png'
import {Navigation} from "swiper";
import Slide from "./Slide/Slide";
import SlideNext from "../../../Swiper/SlideNext";
import SlidePrev from "../../../Swiper/SlidePrev";

const SliderProducts = () => {

    return (
        <div className={'flex items-center'}>
            <Swiper
                slidesPerView={1}
                spaceBetween={40}
                modules={[Navigation]}
                style={{
                    margin: '0 1rem',
                    position: 'relative',
                }}
                breakpoints={{
                    800: {
                        slidesPerView: 2
                    }
                }}
            >
                <SwiperSlide>
                    <Slide
                        description={'Профессиональная система для управления сайтами и интернет магазинами'}
                        image={product_bitrix}
                    />
                </SwiperSlide>

                <SwiperSlide>
                    <Slide
                        description={'Продвинутая система аналитики для руководителей'}
                        image={product_nemind}
                    />
                </SwiperSlide>

                <SwiperSlide>
                    <Slide
                        description={'Облачная система для для учета клиентов и сделок'}
                        image={product_amo}
                    />
                </SwiperSlide>

                <SwiperSlide>
                    <Slide
                        description={'Единый корпоративный портал для вашей компании'}
                        image={product_bitrix24}
                    />
                </SwiperSlide>

                <SwiperSlide>
                    <Slide
                        description={'Корпоративная связь с гибкими возможностями интеграции'}
                        image={product_smsru}
                    />
                </SwiperSlide>

                <div className={'flex justify-between top-1/2 -translate-y-1/2 absolute z-10 w-full'}>
                    <SlidePrev>
                        <div className={'w-8 invert rotate-180 cursor-pointer'}>
                            <Image image={arrow}/>
                        </div>
                    </SlidePrev>

                    <SlideNext>
                        <div className={'w-8 invert cursor-pointer'}>
                            <Image image={arrow}/>
                        </div>
                    </SlideNext>
                </div>
            </Swiper>
        </div>
    );
};

export default SliderProducts;

В итоге имеем вот такую картинку

Проблема в том, что я не знаю как можно отценрировать элементы внутри wrapper div элемента, так как он автоматически подставляет их в class wrapper и я не могу прописать свой-во align-items: center для него, как можно решить это проблему?