title: How can I vertically center images inside flexslider
body: <p>I have tried using flexbox to vertically center the images which was working but I noticed that if you did a hard refresh on firefox the slider would disappear this was due to flexbox for some reason. I have created a demo in codepen but for some reason flexbox doesn't work now. I need an alternate solution to flexbox anyway. Can you help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function(){
      jQuery('.slider').flexslider({
          animation: "slide",
          slideshow: true,
          slideshowSpeed: 4000,           
          animationSpeed: 600, 
          pausePlay: true,
          controlNav: true,
          directionNav: false,
          pauseText: '',             
          playText: '',
          pauseOnHover: true,
      });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider{
      display: -webkit-box!important; 
      display: -moz-box!important;
      display: -ms-flexbox!important;
      display: -webkit-flex!important; 
      display: flex!important;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      width: 100%;
      overflow: hidden;
      margin-bottom: 0;
      max-height: 600px;
      box-sizing: border-box;
  }
  
  .slider img{
      width: 100%;
      height: auto;
  }
  
  .slides li{
      position: relative;
  }
  
  .slides li{
      max-height: 600px;
  }
  
  .flex-control-nav{
      position: absolute;
      top: 20px;
      right: 20px;
      bottom: auto;
      text-align: center;
  }
  
  .flex-control-paging li a{
      width: 15px;
      height: 15px;
      background: #f04d43;
  }
  
  .flex-active{
      background-color: #404041;
  }
  
  .flex-pauseplay{
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider"&gt;
    &lt;ul class="slides"&gt;
        &lt;li&gt;
            &lt;img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" /&gt;
        &lt;/li&gt;
      
      &lt;li&gt;
            &lt;img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" /&gt;
        &lt;/li&gt;
      
      &lt;li&gt;
            &lt;img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" /&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't upload the full code sorry. Please go to my code pen if you wish to help. thanks  <a href="https://codepen.io/Reece_Dev/pen/JyOjOX" rel="nofollow noreferrer">https://codepen.io/Reece_Dev/pen/JyOjOX</a></p>