問題與頁面中的中心div

Question

我目前無法解決的問題是垂直對齊其他div內的div，以便帶有圖像的傳送帶始終位於中間，而不管它的高度如何。

div.flickity-viewport的高度自動從div.for高度自動生成，在這種情況下包含圖像和說明。

插件：Flickity
例子：Codepen

HTML

<div class="gallery gallery-main js-flickity gallerymain inner" data-flickity-options='{"freeScroll": false, "wrapAround": true, "prevNextButtons": false, "pageDots": false, "imagesLoaded": true, "percentPosition": false}'> 
      <div class="for" > 
       <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"> 
       <p id="description">Andrew Malin, Barcelona 2015</p> 
      </div> 
      <div class="for" > 
       <img src="http://s27.postimg.org/z8n28b08z/image.jpg"> 
       <p id="description">THEME, PLACE, MOUNTH AND YEAR</p> 
      </div> 
      <div class="for" > 
       <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"> 
       <p id="description">THEME, PLACE, MOUNTH AND YEAR</p> 
      </div> 
      <div class="for" > 
       <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
       <p id="description">THEME, PLACE, MOUNTH AND YEAR</p> 
      </div> 
      <div class="for" > 
       <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
       <p id="description">THEME, PLACE, MOUNTH AND YEAR</p> 
      </div> 
     </div> 

     <div class="gallery gallery-nav js-flickity gallerysub" data-flickity-options='{ "asNavFor": ".gallery-main", "contain": true, "pageDots": false, "imagesLoaded": true, "percentPosition": false, "prevNextButtons": false, "cellAlign": "center"}'> 
        <div class="nav" > 
       <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"> 
      </div> 
      <div class="nav" > 
       <img src="http://s27.postimg.org/z8n28b08z/image.jpg"> 
      </div> 
      <div class="nav" > 
       <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"> 
      </div> 
      <div class="nav" > 
       <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
      </div> 
      <div class="nav" > 
       <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
      </div> 
     </div> 
     </div> 

CSS

.flickity-enabled { 
    position: absolute; 
    display: block; 
    height: 100%; 
    width: 100%; 

} 

div.flickity-viewport { 
    vertical-align: middle; 
    text-align: center; 
    /*margin: 10%;*/ 
} 

div.flickity-slide { 
    height: 100%; 
    background: red; 
} 

.flickity-enabled:focus { outline: none; } 

.flickity-enabled.is-draggable { 
    -webkit-tap-highlight-color: transparent; 
      tap-highlight-color: transparent; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
} 

.flickity-enabled.is-draggable .flickity-viewport { 
    cursor: move; 
    cursor: -webkit-grab; 
    cursor: grab; 
} 

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { 
    cursor: -webkit-grabbing; 
    cursor: grabbing; 
} 

* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { font-family: sans-serif; } 



div.for img { 
    /*margin-top: 130px; */ 
    display: block; 
    height: 500px; 
} 


.gallery-nav img { 
    display: block; 
    height: 80px; 
    position: relative; 
    float: left; 

} 

div.for { 
    margin-right: 80px; 
} 

{ 
/* margin-top: 90px;*/ 
} 

.gallerysub { 

    position: fixed; 
    bottom: 0; 
    height: 80px; 
    width: 100%; 
    margin-top: 30px; 
} 



#modelname, #description { 
    font-family: Source Sans Pro, sans-serif; 
    font-size: 16px; 
    /*text-align: right;*/ 
    float: right; 
} 

#description { 
    color: rgb(200, 200, 200); 
    font-weight: 300; 
    font-style: italic; 
    margin: 0; 
    margin-top: 15px; 
} 

#modelname { 
    color: #434343; 
    font-weight: 400; 
    margin: 0; 
    margin-top: 15px; 
    margin-right: 15px; 
} 

.is-nav-selected img { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(grayscale.svg); /* Firefox 4+ */ 
    filter: gray; /* IE 6-9 */ 
} 

body { 
    overflow-x: hidden; 
} 

Answer 1

也許這可以幫助：

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