Как изменить выравнивание Vue Awesome Swiper Js Slider Управляет выравниванием

Question

Я хочу выровнять выравнивание элементов управления swiper по центру нижней части экрана.

Я попробовал следующее css не работает.

HTML-код

<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>

Код CSS

.swiper-button-prev {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}
.swiper-button-next {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}

Я хочу, чтобы элементы управления ползунка выглядели примерно так <>