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

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，我把它展示在一起展示我正在谈论的内容。