How do I center a jQuery Cycle 2 Slider?

Question

I have a jQuery Cycle 2 Slider slider here and I need to center it in the page.

I have tried several different approaches but nothing seems to work.

Here is the 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>

Here is the 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;
}

Any guidance on this will be appreciated.

Answer 1

One possible solution. Add this to #outside div in CSS:

#outside{
    display: flex;
}