在div中垂直居中选择[重复]答案

【问题标题】：vertically center select in div [duplicate]在div中垂直居中选择[重复]
【发布时间】：2012-06-27 23:37:50
【问题描述】：

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

我在这里尝试使用解决方案：center div vertically in a % height div?

但是我希望标题位于 div 的顶部，并且该解决方案将标题与选择居中...

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

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

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

【问题讨论】：

您的示例中的div 和display:table-cell 需要像height:100px 这样的显式宽度。
我在jsfiddle.net/kralco626/K8wWa/3 我没有看到变化
@kralco626：看到它in action here，也不得不浮动h3。
Marcel : 你的内部 div 有 100px 的高度，kralco 想要一个 100% 高度的 div。
这对我有用：jsfiddle.net/kralco626/svmEt/2 但它不是水平居中的......

标签： html css

【解决方案1】：

在 cmets 中使用部分解决方案：

看看这个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}

【讨论】：