Ich versuche, einen blauen Behälter in der Mitte eines rosa Behälters zu bekommen, aber vertical-align: middle;in diesem Fall scheint dies nicht der Fall zu sein.

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

Ergebnis:

Erwartung:

Bitte schlagen Sie vor, wie ich das erreichen kann.

Jsfiddle

Beachten Sie zunächst, dass dies vertical-alignnur für Tabellenzellen und Elemente auf Inline-Ebene gilt.

Es gibt verschiedene Möglichkeiten, vertikale Ausrichtungen zu erzielen, die Ihren Anforderungen entsprechen oder nicht. Ich zeige Ihnen jedoch zwei Methoden aus meinen Favoriten:

1. Verwenden von transformundtop

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Der entscheidende Punkt ist, dass ein Prozentwert für toprelativ zum Wert heightdes enthaltenen Blocks ist. Während ein Prozentwert auf transforms relativ zur Größe des Feldes selbst (des Begrenzungsrahmens) ist.

Wenn Probleme beim Rendern von Schriftarten auftreten (verschwommene Schrift), müssen Sie perspective(1px)der transformDeklaration Folgendes hinzufügen :

transform: perspective(1px) translateY(-50%);

Es ist erwähnenswert, dass CSS transform in IE9 + unterstützt wird .

2. Verwenden von inline-block(Pseudo-) Elementen

Bei dieser Methode haben wir zwei Geschwisterelemente inline-block, die durch vertical-align: middleDeklaration vertikal in der Mitte ausgerichtet sind .

Einer von ihnen hat eine heightvon 100%der Mutter und das andere ist unser gewünschtes Element , dessen wollten wir es in der Mitte auszurichten.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Schließlich sollten wir eine der verfügbaren Methoden verwenden, um die Lücke zwischen Elementen auf Inline-Ebene zu entfernen .

benutze das :

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Verweisen Sie auf diesen Link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Verwenden Sie Flex Blox in Ihrem absout positionierten Div, um dessen Inhalt zu zentrieren.

Siehe Beispiel https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

Vertikal und horizontal zentrieren:

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

Sie können display:table/ verwendentable-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}

<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>

Hier ist eine einfache Möglichkeit, das Top-Objekt zu verwenden.

Beispiel: Wenn die absolute Elementgröße 60px beträgt.

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

Eine zusätzliche einfache Lösung

HTML:

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

CSS:

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}

Bitte überprüfen Sie diese Antwort auf ein ähnliches Problem.

Dies ist bei weitem der einfachste Weg, den ich gefunden habe.

https://stackoverflow.com/a/26079837/4593442

HINWEIS. Ich habe display verwendet: -webkit-flex; statt Anzeige: flex; zum Testen innerhalb der Safari.

FUSSNOTE. Ich bin nur ein Anfänger und teile die Hilfe von jemandem, der eindeutig erfahren ist.

Sie können dies tun, indem Sie display:table;in parent div und display: table-cell; vertical-align: middle;in child div verwenden

<div style="display:table;">
      <div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;">
          <div style="background-color: lightblue; ">test</div>
      </div>
  </div>