Сделать элемент внутри Div Вертикально центра

Question

My code here

   <div class="row"> 
       <div class="col-md-3"> 
        <div class="form-group"> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox"> 
           Apple 
          </label> 
         </div> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox"> 
           Banana 
          </label> 
         </div> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox"> 
           Abc 
          </label> 
         </div> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox"> 
           xyz 
          </label> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="form-group"> 
         <span class="btn btn-primary btn-file" style="float: left;"> 
          Browse… <input type="file" id="uploadBtn" name="upload"> 
         </span> 
        </div> 


       </div> 
       <div class="col-md-3"> 
        <div class="form-group"> 
         <!--<label class="col-sm-2 control-label"> 
          Favourite food 
         </label>--> 

         <div class="checkbox"> 
          <label> 

           <input type="checkbox"> 
           Apple 

          </label> 
         </div> 
         <div class="checkbox"> 
          <label> 

           <input type="checkbox"> 
           Banana 

          </label> 
         </div> 
        </div> 


       </div> 
       <div class="col-md-3"> 
        <div class="form-group"> 
         <span class="btn btn-primary btn-file" style="float: left;"> 
          Browse… <input type="file" id="uploadBtn" name="upload"> 
         </span> 
        </div> 


       </div> 
      </div> 

Здесь Кнопка Обзор находится в верхней части DIV, я хочу, чтобы привести его в вертикально-центр с CheckBox дел.

Хотите что-то вроде

Я пробовал:

.form-group { 
vertical-align: middle; 
height: 100px; 
} 

Answer 1

Flexbox полезно для решения этой проблемы. Добавить новый класс в родителя из двух блоков, которые вы хотите выровнять центр - с кодом, как-это то, что является .row так:

.flex-center { 
    display: flex; 
    align-items: center; 
} 

Вот рабочий пример на Codepen