Wie man eine schwebende <div> vertikal zentriert, relativ zur Höhe ihres Containers, erstellt.

Question

Ich versuche, eine schwebende “div” vertikal in einer übergeordneten “div” auszurichten. Da die übergeordnete “div” eine variable Menge an Inhalten enthalten kann, möchte ich, dass sie vertikal zentriert ist, anstatt einen festen margin-top-Wert an der schwebenden “div” festzulegen. Hier ist ein Live-Beispiel, in dem Sie einen Rechts-Pfeil oben rechts in der grauen “div” sehen, aber ich möchte, dass er vertikal zentriert ist http://jsbin.com/oriqow/1/

CSS:

.item { vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
.item > div:not(.arrow) { margin-bottom:10px; }
.arrow { float: right; }

HTML:

  Titel
  Untertitel
  Weiteres potenzielles Element hier
  Und ein weiteres

Answer 1

Füge diesen Style deiner .arrow Klasse hinzu:

position: absolute;
right: 0;
top: 50%;
margin-top: -18px;

(und entferne das float:right;)

Und füge dies deiner .item Klasse hinzu:

position: relative;

Answer 2

http://jsfiddle.net/v8f8Q/

.item { position:relative; vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
.item > div:not(.arrow) { margin-bottom:10px; }
.arrow { position:absolute; top:45%; right:2%; }