Wie kann ich Elemente in einem div vertikal ausrichten?

Question

Ich habe eine div mit zwei Bildern und einem h1 . Alle müssen innerhalb des Divs vertikal nebeneinander ausgerichtet sein.

Eines der Bilder muss sein absolute positioniert innerhalb der div .

Welches CSS ist erforderlich, damit dies auf allen gängigen Browsern funktioniert?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

Answer 1

Nur dies:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Eine einzellige Tabelle innerhalb des Divs übernimmt die vertikale Ausrichtung und ist rückwärtskompatibel bis in die Steinzeit!

Answer 2

Hier ist nur ein weiterer (reaktionsfähiger) Ansatz:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Answer 3

<div id="header" style="display: table-cell; vertical-align:middle;">

...

oder CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Browser-Abdeckung