webentwicklung-frage-antwort-db.com.de

So zentrieren Sie div vertikal in einem absolut positionierten übergeordneten div

Ich versuche, einen blauen Behälter in der Mitte eines rosa zu bekommen, aber es scheint vertical-align: middle; macht den Job in diesem Fall nicht.

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

enter image description here

Erwartung:

enter image description here

Bitte schlagen Sie vor, wie ich das erreichen kann.

Jsfiddle

htmlcssvertical-alignmentabsolute
112
Vladimirs

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

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

1. Mit transform und top

.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 top relativ zum height des enthaltenen Blocks ist. Während ein Prozentwert für transforms relativ zur Größe der Box selbst (der Begrenzungsbox) ist.

Wenn Probleme beim Rendern von Schriftarten (verschwommene Schrift) auftritt, besteht die Korrektur darin, perspective(1px) zur transform -Deklaration hinzuzufügen.

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

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

2. Verwenden Sie inline-block (Pseudo-) Elemente

Bei dieser Methode haben wir zwei gleichgeordnete inline-block - Elemente, die durch die vertical-align: middle - Deklaration vertikal in der Mitte ausgerichtet sind.

Einer von ihnen hat einen height von 100% Seines Elternteils und der andere ist unser gewünschtes Element, dessen Mitte wir ausrichten wollten.

.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 zum Entfernen der Lücke zwischen Elementen auf Inline-Ebene verwenden.

268
Hashem Qolami

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/

39
Điển Trương

Verwenden Sie Flex Blox in Ihrem abwesend positionierten Div, um den 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;
}
14
Chris Aelbrecht

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%);
}
9
Juan Angel

Sie können display:table/table-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>
3
G-Cyr

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

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

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

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;  
}
1
Hicham

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 Anzeige verwendet: -webkit-flex; anstelle von Anzeige: flex; zum Testen in der Safari.

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

1
Whanau Paitai

Sie können es tun, indem Sie display:table; in übergeordnetem div und display: table-cell; vertical-align: middle; in child div

<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>
0
Arindam Sarkar