中心垂直flexslider画廊

Question

我需要垂直居中画廊滑块。我创建了一个班级＆＃34; centrary＆＃34;应用位置相对，前50％和translateY（-50％）。但是没有效果，因为在应用该课程后，图库会保留在页面顶部。画廊位于全屏灯箱内。所以我需要画廊位于屏幕的中心，无论屏幕的大小。可能是我将班级中心应用于错误的元素。

这是html代码

<div id="openGallery" class="item-gallery ">
  <a href="#close" title="Close" class="close-gallery"><span class="icon-subastea-close"></span></a>
  <div class="large-8 large-centered medium-8 medium-centered columns">          
    <div class="flexslider">
      <ul class="slides">
        <li><img src="assets/images/1.png" class="centrary" alt="Foto 1"></li>
        <li><img src="assets/images/2.png" class="centrary" alt="Foto2"></li>
        <li><img src="assets/images/3.png" class="centrary" alt="Foto3"></li>
        <li><img src="assets/images/4.jpg" class="centrary" alt="Foto4"></li>
      </ul>
    </div>          
    <p class="image-counter"></p>         
  </div>
</div>

这是我正在使用的一些CSS课程。其中一些是从Flexslider库继承的。

.item-gallery{
  background-color:$black-opacity-modal;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 300;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.flexslider {  
  border: none;
  background: transparent;
  max-height: 31.25em; 
}

/* FlexSlider Default Theme */
.flexslider {
  margin: 0; 
  position: relative; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  -o-border-radius: 4px; 
  border-radius: 4px; 
  box-shadow: 0 1px 4px rgba(0,0,0,.2); 
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
  -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
  zoom: 1;}

/* FlexSlider Necessary Styles */ 
 .flexslider {margin: 0; padding: 0;}
 .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
 .flexslider .slides img {width: 100%; display: block;}
 .flex-pauseplay span {text-transform: capitalize;}

 /* Clearfix for the .slides element */
   .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
   html[xmlns] .slides {display: block;} 
   html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

.centrary {
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}