Cyclone slider images are not in center - css

Question

I'm using Cyclone slider for one of my website here: http://www.malithaisouthcenter.com/
if you zoom out you can see the images are not in center position(they are in left side of the page) though {margin: 0 auto} has been applied. how can I fix it?
/*** Template Standard ***/
.cycloneslider-template-standard{
position:relative;
outline: none;
}
.cycloneslider-template-standard .cycloneslider-slides{
position:relative;
overflow:hidden;
}
.cycloneslider-template-standard .cycloneslider-slide{
text-align: center;
width: 100%; /* For slides in scrollHorz to work */
display: none; /* Hide slides to prevent FOUC when JS hasn't kicked in yet */
background: #fff; /* Add background to prevent slides from peeking behind the current slide when fx=scrollHorz and hideNonActive=false */
}
.cycloneslider-template-standard .cycle-slide{
display: block; /* Show slide so that getBoundingClientRect().height will not return 0. Class .cycle-slide is added when cycle has initialized. */
}
.cycloneslider-template-standard div[data-cycle-hide-non-active="false"] .cycloneslider-slide{
opacity: 0; /* Avoid youtube and vimeo or other slides from peeking behind the current slide whe in transit */
}
.cycloneslider-template-standard div[data-cycle-dynamic-height="off"] .cycloneslider-slide-image{
height: 100%; /* To prevent cutting off captions when dynamic height is off */
}
.cycloneslider-template-standard .cycloneslider-slide:first-child, /* Show first slide */
.cycloneslider-template-standard .cycle-sentinel + .cycloneslider-slide{ /* Select next slide when using sentinel slide */
display: block;
}
.cycloneslider-template-standard .cycloneslider-slide img{
display:block;
margin:0 auto;
padding:0;
max-width:100%;
border:0;
}
.cycloneslider-template-standard.cycloneslider-width-full .cycloneslider-slide img{
/*width:100%;*/
}
.cycloneslider-template-standard .cycloneslider-slide iframe, /* Make our videos fluid */
.cycloneslider-template-standard .cycloneslider-slide object,
.cycloneslider-template-standard .cycloneslider-slide embed {
position: absolute;
left: 0;
top: 0;
width: 100% !important; /* Override width attrib */
height: 100% !important; /* Override height attrib */
}
.cycloneslider-template-standard .cycloneslider-slide-youtube,
.cycloneslider-template-standard .cycloneslider-slide-vimeo{
background: #000;
}
.cycloneslider-template-standard .cycloneslider-slide-custom,
.cycloneslider-template-standard .cycloneslider-slide-testimonial{
min-height: 100%;
}
.cycloneslider-template-standard div[data-cycle-dynamic-height="on"] .cycloneslider-slide-custom,
.cycloneslider-template-standard div[data-cycle-dynamic-height="on"] .cycle-sentinel + .cycloneslider-slide-testimonial{
min-height: 100px; /* Disable 100% min height when dynamic height is on. To fix issue with scrollHorz */
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial{
font-style: italic;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial blockquote{
margin-bottom: 0;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial p{
margin: 0;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial .cycloneslider-testimonial-author{
text-align: right;
font-style: normal;
}
.rtl .cycloneslider-template-standard .cycloneslider-slide-testimonial .cycloneslider-testimonial-author{
text-align: left;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial .cycloneslider-testimonial-author a{
text-decoration: none;
}
/*** Prev/Next ***/
.cycloneslider-template-standard .cycloneslider-prev,
.cycloneslider-template-standard .cycloneslider-next,
.cycloneslider-template-standard .cycloneslider-pager span {
cursor:pointer;
}
.cycloneslider-template-standard .cycloneslider-prev,
.cycloneslider-template-standard .cycloneslider-next{
position:absolute;
top:50%;
z-index:501;
display: block;
margin-top:-12px;
width:24px;
height:24px;
border-radius: 40px;
background: #fefefe;
opacity: 0;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
-webkit-box-shadow: 1px 1px 2px 0px #333333;
box-shadow: 1px 1px 2px 0px #333333;
}
.cycloneslider-template-standard:hover .cycloneslider-prev,
.cycloneslider-template-standard:hover .cycloneslider-next{
opacity: 0.4;
}
.cycloneslider-template-standard .cycloneslider-prev:hover,
.cycloneslider-template-standard .cycloneslider-next:hover{
opacity: 1;
}
.cycloneslider-template-standard .cycloneslider-prev.disabled,
.cycloneslider-template-standard .cycloneslider-next.disabled{
display: none;
}
.cycloneslider-template-standard .arrow{
position: absolute;
top: 50%;
left: 50%;
margin-top: -6px;
width: 0;
height: 0;
}
.cycloneslider-template-standard .cycloneslider-prev{
left:10px;
}
.rtl .cycloneslider-template-standard .cycloneslider-prev{
left:auto;
right:10px;
}
.cycloneslider-template-standard .cycloneslider-prev .arrow{
margin-left: -4px;
border-top: 6px solid transparent;
border-right: 6px solid #333;
border-bottom: 6px solid transparent;
}
.rtl .cycloneslider-template-standard .cycloneslider-prev .arrow{
margin-left: -2px;
border: 0;
border-top: 6px solid transparent;
border-left: 6px solid #333;
border-bottom: 6px solid transparent;
}
.cycloneslider-template-standard .cycloneslider-next{
right:10px;
}
.rtl .cycloneslider-template-standard .cycloneslider-next{
right:auto;
left:10px;
}
.cycloneslider-template-standard .cycloneslider-next .arrow{
margin-left: -2px;
border-top: 6px solid transparent;
border-left: 6px solid #333;
border-bottom: 6px solid transparent;
}
.rtl .cycloneslider-template-standard .cycloneslider-next .arrow{
margin-left: -4px;
border: 0;
border-top: 6px solid transparent;
border-right: 6px solid #333;
border-bottom: 6px solid transparent;
}
/*** Pager ***/
.cycloneslider-template-standard .cycloneslider-pager{
position:absolute;
bottom:-22px;
left:0;
z-index:100;
width: 100%;
height: 12px;
text-align: center;
}
.cycloneslider-template-standard .cycloneslider-pager span {
display: inline-block;
margin: 0 3px;
width: 12px;
height: 12px;
border-radius: 6px;
background: #333;
vertical-align: top;
font-size: 0;
line-height: 0;
-webkit-box-shadow: 1px 1px 2px 0px #333333;
box-shadow: 1px 1px 2px 0px #333333;
}
.ie7 .cycloneslider-template-standard .cycloneslider-pager span{
zoom: 1;/* IE 7 inline-block */
*display: inline;/* IE 7 inline-block */
}
.cycloneslider-template-standard .cycloneslider-pager span.cycle-pager-active {
background-color: #ccc;
}
/*** Caption ***/
.cycloneslider-template-standard .cycloneslider-caption{
position:absolute;
bottom:0;
left:0;
z-index:500;
width:100%;
background: #222;
color:#fff;
opacity: 0.7;
text-align: left;
}
.rtl .cycloneslider-template-standard .cycloneslider-caption{
text-align: right;
}
.cycloneslider-template-standard .cycloneslider-caption-title{
margin-bottom:0;
padding:10px 20px 5px 20px;
font-size:22px;
line-height:1;
}
.cycloneslider-template-standard .cycloneslider-caption-description{
padding:0 20px 15px 20px;
font-size:12px;
line-height:1.5;
}

Answer 1

The parent div should have an auto-margin.
.cycloneslider {
margin: 0 auto;
}
The reason for this is that the img has the exact same width as the parent, as inherited. Therefor the difference is only 0px, and that is what auto will work with

Answer 2

you can use container class for center slider when zoomed in and zoomed out
<div class="container-fluid">
<div class="slider">
<div> <img src="LED-web-banner-updated-1.jpg" title="banner" class="img-responsive"></div>
<div><img src="Lighting_mainBanner.png" title="mainbanner" class="img-responsive" ></div>
<div><img src="Stealth_mainbanner.PNG" title="another banner" class="img-responsive"></div>
</div>
</div>