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

[whx20202]

<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 前端的同学很多，感觉问题也比较简单，希望大家不吝赐教哈

谢谢大家，10L 的方法是可以用的

我最后直接用了 layUI 这里也算打个广告把，官方哪里有很多例子，直接抄就行了
对于我这种后端程序员，我写前端只是显示数据（换句话说什么都可以换，不用遵从什么设计文档）
这个库是最方便的

[whx20202]

[whx20202]

@whx20202 如图所示，这个物品类型，明显和右边的 selector 对不齐

[zhlssg]

display: inline-flex;align-items: center;

[zhlssg]

再加上 justify-content: center;吧，最好能把代码放到 jsfiddle 或者 codepen，这样直观啊

[lzvezr]

V4 的话可以在 row 加.align-items-center，并且固定 row 的高度，看命名和 #3 应该差不多

[jy02534655]

高宽如果固定的话，只是物品类型这几个字可以通过指定内边距或者行高来居中

[wzhndd2]

我都是使用 transform 的 50%来做垂直居中，觉得你最好还是 jsfiddle 或者 codepen，这样好帮着你调试看

[chotow]

参考： https://www.zhihu.com/question/20543196
我用的是 before 伪元素法。
不考虑兼容性的话，建议用 flex 布局，超方便。

[forestyuan]

用 table 元素可以做到吧

[jkeylu]

六种居中方式
https://codepen.io/jkeylu/pen/YEJEVy

[gen900]

flex 或者 margin-top 伪造一个剧中效果

[Mystic0]

用 line-height 让左侧文字居中就好了