保持图像垂直居中/固定在移动的幻灯片上？

Question

我有一个滑块（使用 bxslider），我想在滑块顶部水平和垂直居中放置一个固定图像，以便文本保持不变，而幻灯片（每个都有不同的背景图像）在其下方移动。我尝试了以下方法，将我想要保留的横幅定位在父部分容器的绝对位置，但这不是响应式的。有没有更好的响应方式来保持文本垂直居中？提前谢谢：

  $('#productslider').bxSlider({
	  minSlides: 1,
	  maxSlides: 1,
	  pager: true,
	  controls: false,
	  auto: true,
	  speed: 1000,
	  pause: 7500
  });

  #products {
    background-color: #FFFEE3;
    height: 100%;
    position: relative}

  #products .bx-wrapper {
    padding: 0; }

  #products .slide {
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 360px; }

  #products .banner {
    position: absolute;
    height: 360px;
    padding: 5% 20%;
    z-index: 600;
    margin: 0 auto;
    text-align: center; }

  #chocbg {
    background-color: brown;
    }
  #vanbg {
      background-color: brown;
      }

  #cinbg {
      background-color: brown;
      }

<section id="products">
	<div class="banner">
		<img src="img/products_intro.png">
	</div>
	<div id="productslider" class="intro">
		
		<div class="slide" id="chocbg">
			
		</div>
		<div class="slide" id="vanbg">
			
		</div>
		<div class="slide" id="cinbg">
		
		</div>
		
    </div>
  </section>

Answer 1

将banner div 绝对定位在滑块的顶部会起作用。然后，您可以在该 div 上使用 display:flex 以响应方式水平和垂直控制其内容。

这是我快速整理的example，展示了我在说什么。