在一個div內部垂直列表中心

Question

我很可能很容易解決問題。我有一個無序列表和3個項目內的響應divs。

我已經設法將其居中居中，但垂直是我掙扎的地方。

<div class="left"> 
    <div class="boxtext"> 
     <div class="insidetext"> 
      <ul> 
       <li>WATER</li> 
       <li>JUICE</li> 
       <li>TEA</li> 
      </ul> 
     </div> 
    </div> 
</div> 

.left { 
    @include aspect-ratio(16,9); 
    width: 50%; 
    height: 100vh; 
    min-width: 300px; 
    position: relative; 
    background-size: cover; 
    background-color:#333; 
    position: relative; 
} 

@media (max-width:768px) { 
    .left { 
     width: 100%; 
     height: 70vh; 
    } 
} 

.boxtext { 
    @include aspect-ratio(16,9); 
    border: solid white 0.15em; 
    height: 70vh; 
    width: 70%; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    text-align: center; 
} 

@media (max-width:768px) { 
    .boxtext { 
     width: 70%; 
     height: 70%; 
    } 
} 
.insidetext { 
    @include aspect-ratio(16,9); 
    background-color: aliceblue; 
    height: 70%; 
    width: 70%; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    font-size: 9vh; 
    text-align: center; 
    min-height:100px; 
} 

.insidetext li { 
    list-style-type:none; 
} 

.insidetext ul { 
    display: table; 
    margin: 0 auto; 
} 

.insidetext ul,li { 
    list-style-type: none; 
    list-style-position:inside; 
    margin:0 auto; 
    padding:0; 
    vertical-align:middle; 
} 

這裏是一個測試：http://jsfiddle.net/qq3LLop8/

Answer 1

這應該工作：

.insidetext ul { 
    display: table; 
    margin: 0 auto; 
    position: relative;     <-- Note these additions 
    top: 50%;        <-- 
    transform: translateY(-50%);   <-- 
} 

見例如：

https://jsfiddle.net/atasker2/jo6etx0u/

Answer 2

只需添加display: table;到.insidetext和display: table-cell;至.insidetext ul。