中心柔性容器

Question

單獨的項目我有一個Flexbox的結構是這樣的：

<div class="container"> 

    <div class="flex-child-1"> 

     <div class="sub-1"> 
      sub-item 1 
     </div> 

     <div class="sub-2"> 
      sub item 2 
     </div> 

    </div> //end item 1 

    <div class="flex-child-2"> 
     item 2 
    </div> // end item 2 

</div> // end container 

我期待垂直居中sub-2其容器內：flex-child-1（這本身就是一個Flexbox的孩子）。請注意，我不想以sub-1爲中心。想法？

Answer 1

的flexbox specification允許absolutely-positioned flex children，使您能夠中央部個別柔性項目：

CSS

.flex-child-1 { 
    display: flex; 
    height: 480px; /* for demo purposes */ 
    position: relative; /* establish nearest positioned ancestor for abs. positioning */ 
} 

/* for vertical and horizontal centering */ 
.sub-2 { 
    position: absolute; 
    left: 50%; /* relative to nearest positioned ancestor */ 
    top: 50%; /* relative to nearest positioned ancestor */ 
    transform: translate(-50%, -50%); /* relative to element's height & width */ 
} 

/* for vertical centering only */ 
.sub-2 { 
    position: absolute; 
    left: 0%; 
    top: 50%; 
    transform: translate(0, -50%); 
} 

DEMO：http://jsfiddle.net/24tpsvb9/6/