jQuery Cycle 2 Sliderを中央に配置するにはどうすればいいですか？

Question

私はjQueryサイクル2スライダースライダーhereを持っており、ページ内に中心を置く必要があります。

私はいくつかのアプローチを試みましたが、何も動作していないようです。ここで

はhtmlです：ここでは

<div class="slider"> 
    <div id=outside> 

    <!-- slideshow --> 
    <div class="cycle-slideshow" 
     data-cycle-fx=fade 
     data-cycle-timeout=4000 
     data-cycle-center-horz=true 
     data-cycle-center-vert=true 
     data-cycle-prev="<" 
     data-cycle-next="#next" 
     > 
     <div class="cycle-prev"></div> 
     <div class="cycle-next"></div> 
     <div class="cycle-overlay"></div><!-- empty element for overlay --> 

     <img class="img-responsive" src="http://72.249.63.244/~develplights/images/uploads/slider_1-blue-lights1.jpg" 
      alt="Blue Lights" data-cycle-title="New Items Now In Stock" 
      data-cycle-desc="20% Off at Checkout<br /> 
      Enter Code ELP "> 

     <img class="img-responsive" src="http://72.249.63.244/~develplights/images/uploads/Screen_Shot_2016-09-07_at_4.49_.32_PM_.jpg" 
      alt="Blue Lights" data-cycle-title="LED LIGHTING SALE" 
      data-cycle-desc="SHOP NOW<br /> 
      "> 


    </div> 
    </div>  
</div> 

はCSSです：

.slider { 
    height: auto; 
    padding: 20px 0; 
    margin: auto; 
    background: #e5f1fb 
    } 

.cycle-slideshow { 
    margin: 0 auto !important; 
} 

.cycle-slideshow img { 
    height: auto; 
    opacity: 0; 
    filter:alpha(opacity=0); 
    margin: 0 auto; 
} 

/* overlay */ 
.cycle-overlay { 
    position: absolute; 
    top: 100px; 
    left: 90px; 
    width: 80%; 
    z-index: 600; 
    font-size: 60px; 
    text-transform: uppercase; 
    font-weight: 500; 
    color: white; 
    padding: 15px; 
} 

この上の任意のガイダンスは理解されるであろう。

Answer 1

1つの可能な解決策。 これをCSSの#outside divに追加：

#outside{ 
    display: flex; 
}