咨询一个垂直居中的问题，查了资料还是搞不定

<div class="container"> <div class="container-fluid"> <div id="searchArea"> <div id="searchCriteriaArea"> <div class="row" style=""> <div class="col-md-1" style="display inline-block;"> 物品类型 </div> <div class="col-md-4"> <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false"> <option value="0">苹果</option> <option value="1">菠萝</option> <option value="2">香蕉</option> <option value="3">火龙果</option> <option value="4">梨子</option> </select> </div> </div> </div> <div id="searchTable"> </div> </div> </div> </div> 

代码比较简单，现在问题是: class="row"的这个 DIV，高度是自动生成的 34。它的下面有 2 个 col 的 DIV，第一个高度是 20，但是是向上对齐的，第二个高度是 34，撑满了父元素。 这样就很难看了

我想让第一个 col，向下去一点点，高度上居中，网上搜了很多教程：

1. 好像我这个是“父元素高度未知”，因此很多手段不能用
2. 有个教程是这样的： #container{ display:table-cell; text-align:center; vertical-align:middle; }

#center{

} 但是我用了之后更糟糕了，初步排查是 table-cell 这个样式造成的

感觉这个业务应该满大街都是的，说白了就是 bootstrap 的一个 row 下，有两个 col，我想让两个 col 在高度上都居中，谷歌了好久还是搞不定。在这里发帖一是想规避一下问题，第二也想了解一下机制

V2EX 前端的同学很多，感觉问题也比较简单，希望大家不吝赐教哈