Как центрировать элемент в столбце по вертикали относительно другого столбца

Question

Как я могу центрировать две кнопки по вертикали на мой взгляд?

. Например:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-5"> 
      <h4>My List</h4> 
      <div style="height:400px; overflow-y:auto"> 
       <ul> 
        // List of checkboxes 
       </ul> 
      </div> 
     </div> 

     <div class="col-md-2"> 
      <input type="button" id="btnAddField" class="btn btn-primary" value="Add" /> 
      <input type="button" id="btnRemoveField" class="btn btn-primary" value="Remove" /> 
     </div> 

     <div class="col-md-5"> 
      <h4>Selected Fields</h4> 
      // This will contain the list selected from the checkboxes. 
     </div> 
    </div> 
</div> 

Я хочу кнопки в колонке 2 центрируются по отношению к колонку 1 (что в данном случае я сделал высоту 400px

Answer 1

Вы можете добавить новый класс на row, который будет использовать Flexbox и вертикально центр детали с align-items: center, когда ширина > 992px что точка останова из mdDEMO

@media(min-width: 992px) { 
    .flex-row { 
    display: flex; 
    align-items: center; 
    } 
} 

Answer 2

Пробег: css Высота линии. Надеюсь, это поможет.

vertical-align: middle; 
line-height: 400px; 

Answer 3

Если вы можете использовать Flexbox, что-то, как это будет делать то, что вы хотите (с помощью существующих классов):

.row { 
    display: flex; 

    [class^="col"] { 
     float: none; 
     flex-shrink: 0; 
     margin: auto 0; 
    } 
}