在flexbox中垂直居中两个子元素

Question

我需要你的帮助，我尝试将文本居中放到她的div垂直，但我尝试了所有，但它不运行。我与你分享默认模式。

最终的解决方案是使用填充，但我认为flexbox可以成功。我不知道，我阻止

body { 
 
    background: #2F546B; 
 
    margin: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
#current { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
} 
 

 
.current_details { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    width: 200px; 
 
    height: 300px; 
 
    margin: 5px 5px; 
 
    text-align: center; 
 
    border: 2px solid red; 
 
} 
 

 
.current_details div { 
 
    font-size: 2em; 
 
    border: 2px solid #fdfefe; 
 
} 
 

 
.current_details div:nth-child(1) { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 

 
.current_details div:nth-child(2) { 
 
    color: #000; 
 
    background: #fdfefe; 
 
    -webkit-box-flex: 2; 
 
     -ms-flex: 2; 
 
      flex: 2; 
 
}

<div id="current"> 
 
    <a ng-repeat="(key, value) in vm.currentQuotes" ng-href="#!/current/{{key}}"> 
 
     <div class="current_details"> 
 
      <div>AUD</div> 
 
      <div>1.5045</div> 
 
     </div> 
 
    </a> 
 
</div>

Answer 1

你可以让那些箱子display: flex; align-items: center; justify-content: center;垂直和水平居中的内容。

body { 
 
    background: #2F546B; 
 
    margin: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
#current { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
} 
 

 
.current_details { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    width: 200px; 
 
    height: 300px; 
 
    margin: 5px 5px; 
 
    text-align: center; 
 
    border: 2px solid red; 
 
} 
 

 
.current_details div { 
 
    font-size: 2em; 
 
    border: 2px solid #fdfefe; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.current_details div:nth-child(1) { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 

 
.current_details div:nth-child(2) { 
 
    color: #000; 
 
    background: #fdfefe; 
 
    -webkit-box-flex: 2; 
 
     -ms-flex: 2; 
 
      flex: 2; 
 
}

<div id="current"> 
 
    <a ng-repeat="(key, value) in vm.currentQuotes" ng-href="#!/current/{{key}}"> 
 
     <div class="current_details"> 
 
      <div>AUD</div> 
 
      <div>1.5045</div> 
 
     </div> 
 
    </a> 
 
</div>