vertically center select in div [duplicate]

This question already has answers here: Closed 10 years ago.

Possible Duplicate:

center div vertically in a % height div?

I am trying to use the solution here: center div vertically in a % height div?

however I want the header to be at the top of the div and that solution puts the heade开发者_如何学Cr centered with the select...

What I want is the header to remain at the top, and the select to be vertically and horizontally centered and the total height of the outside div to be 100px.

What I tried is on the fiddle below...

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

---

Using the partial solution in the comments :

Look at this jsFiddle

To have horizontal align, you'll have to put your display:table-cell div in a display:table div.

since we can't trust jsFiddle to always be around, here's the result:

<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}