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

<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，向下去一点点，高度上居中，网上搜了很多教程：

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

#center{

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

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

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