Как в режиме FullScreen отобразить блок по центру экрана на мобильных устройствах?

Я использую функцию requestFullscreen

  $('#slide-show').click(function(){
          const player = document.querySelector('.presentation-player');
          if (player.requestFullscreen) {
              player.requestFullscreen();
          } else if (player.webkitRequestFullscreen) { /* Safari */
              player.webkitRequestFullscreen();
          } else if (player.msRequestFullscreen) { /* IE11 */
              player.msRequestFullscreen();
          }
  });

происходит такое отображение элементов, как мне сделать так, чтобы элемент был по центру страницы, а не вверху?

<div class="presentation-player-slides">
    <ul class="bxslider" style="margin: 0; padding: 0">
        @{
            int index = 0;
            const int initialVisible = 2;

            foreach (SlideViewModel slide in Model.Slides)
            {
                bool hide = index > initialVisible;

                <li style="margin: 0; padding: 0; list-style: none; @(hide ? "display: none;" : string.Empty)">
                    <meta itemprop="name" content="Слайд @(slide.Index + 1) в презентации «@(Model.Presentation.Name)»"/>
                    <meta itemprop="caption" content="@Model.Presentation.Name"/>
                    <meta itemprop="description" content="@slide.TagAttribute"/>

                    <picture>
                        <source srcset="@(slide.StaticUrl).webp" type="image/webp"/>
                        <source srcset="@(slide.StaticUrl)" type="image/jpeg"/>
                        <img src="@(slide.StaticUrl)"
                             title="@Model.Presentation.Name"
                             alt="@slide.TagAttribute"
                             itemprop="contentUrl" @(hide ? Html.Raw("loading=\"lazy\"") : Html.Raw(""))
                             style="max-width: 100%; max-height: 100vh; background-color: white; object-fit: contain;"/>
                    </picture>
                </li>

                index++;
            }
        }


    </ul>
</div>

.presentation > .presentation-player {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.presentation > .presentation-player > .presentation-player-slides {
  overflow: hidden;
  padding: 0;
}
.presentation > .presentation-player > .presentation-player-slides .presentation-player-slides-slide {
  display: none;
  width: 100%;
}
.presentation > .presentation-player > .presentation-player-slides .presentation-player-slides-slide img {
  width: 100%;
}
.presentation > .presentation-player > .presentation-player-slides .presentation-player-slides-slide.active {
  display: block;
}
.presentation > .presentation-player > .presentation-player-controls {
  cursor: pointer;
  font-size: 24px;
  background: #e1ebfa;
}
.presentation > .presentation-player > .presentation-player-controls.next-section {
  border-radius: 0 4px 4px 0;
}
.presentation > .presentation-player > .presentation-player-controls.prev-section {
  border-radius: 4px 0 0 4px;
}
.presentation > .presentation-player > .presentation-player-controls:hover,
.presentation > .presentation-player > .presentation-player-controls.hover {
  background: #d5e4fb;
}
.presentation > .presentation-player > .presentation-player-controls > .presentation-player-control-navigation {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  padding: 0 24px;
}