垂直中心选择div

Question

  

可能重复：
  center div vertically in a % height div?

我正在尝试使用此处的解决方案：center div vertically in a % height div?

但是我希望标题位于div的顶部，并且该解决方案将标题置于select ...

的中心位置

我想要的是标题保持在顶部，选择是垂直和水平居中，外部div的总高度是100px。

我尝试的是下面的小提琴......

jfiddle：http://jsfiddle.net/kralco626/K8wWa/1/

Answer 1

在评论中使用部分解决方案：

看看这个jsFiddle

要进行水平对齐，您必须将display:table-cell div放在display:table div中。

因为我们不能相信jsFiddle永远存在，所以结果如下：

<div id="d1">
    <h3>header</h3>
    <div id="table">
        <div id="d2">
            <select><option>Status</option></select>
        </div>
    </div>
</div>

的CSS

div#d1 {height:100px;width:100%;border:2px solid black}

div#table {display:table; width:100%;text-align:center}
div#d2 {
    display:table-cell;
    vertical-align:middle;
    height:80px;
}

h3{background:red;text-align:center}