无法使用Flexbox的

Question

这里是我的基本的HTML垂直对齐的div：

<div class="col-lg-12"> 
       <div class="col-lg-4 center-block main-text center-text marg-small boxed"> 
       <div class="random">Some Text</div> 
        <div class="col-lg-6 marg-small "> 
        <div id="pick_channel" class="boxed orange"> 
        <div class="square vertical">Channel</div> 
        </div> 
         <div id="pick_objective" class="boxed orange"> 
         <div class="square vertical">Objective</div> 
         </div> 
       </div> 
       </div> 
       </div> 

和相关的CSS：

.boxed{ 
display:flex; 
flex-direction: column; 
flex-wrap:nowrap; 
align-items: center; 
} 

.square { 
height:100px; 
width:100%; 
display:flex; 
align-self:center; 
margin-bottom: 10px; 
} 
.vertical{ 
} 

我试图与id小号pick_channel和pick_objective为矩形落得文字“Channel”和“Objective”以其各自的divs垂直和水平居中。我尝试了一堆组合，但无法弄清楚。

Answer 1

事情是这样的：

.boxed { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
} 
 
.square { 
 
    height: 100px; 
 
    width: 100px; 
 
    /* display: flex; */ 
 
    /* align-self: center; */ 
 
    margin-bottom: 10px; 
 
    border: 1px solid gray; 
 
    text-align: center; 
 
    line-height: 100px; 
 
}

<div class="col-lg-12"> 
 
    <div class="col-lg-4 center-block main-text center-text marg-small boxed"> 
 
    <div class="random">Some Text</div> 
 
    <div class="col-lg-6 marg-small "> 
 
     <div id="pick_channel" class="boxed orange"> 
 
     <div class="square vertical">Channel</div> 
 
     </div> 
 
     <div id="pick_objective" class="boxed orange"> 
 
     <div class="square vertical">Objective</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

在这里你去

.boxed { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
    height: 100px; 
 
    width: 100%; 
 
    margin: 10px 0; 
 
} 
 
.square { 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
.center_content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    width: 100%; 
 
}

<div class="col-lg-4 center_content"> 
 
    <div class="col-lg-6 marg-small "> 
 
    <div id="pick_channel" class="boxed orange"> 
 
     <div class="square vertical">Channel</div> 
 
    </div> 
 
    <div id="pick_objective" class="boxed orange"> 
 
     <div class="square vertical">Objective</div> 
 
    </div> 
 
    </div> 
 
</div>