javascript - 将同级 div 放置在另一个 div 的垂直中心

Question

我正在使用 bootstrap 4 和 owl carousel 2 的网站上创建幻灯片。我是否需要将导航放在幻灯片上，如何操作，请参阅下面的代码:

注意:我需要在容器内进行导航，而不是获得 100% 的窗口宽度。

HTML

<section class="slide">
    <div class="owl-carousel">
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
    </div>
    <div class="container">
        <div class="nav-container"></div>
    </div>
</section>

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    items:1,
    autoplay:true,
    autoplayHoverPause:true,
    nav:true,
    navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'],
    navContainer:'.nav-container'
})

Answer 1

<section class="slide">
    <div class="owl-carousel">
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
    </div>
    <div class="slide-content">
      <div class="container">
          <div class="nav-container"></div>
      </div>
    </div>
</section>

.slide {
  position: relative;
}
.slide .slide-content {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  right: 0;
  z-index: 9999;
}

这会将导航置于幻灯片的中央。如果你想要它在底部调整以适应