Zentrieren Sie die Ausrichtung auf einem absolut positionierten Div

93

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Das Div ist oben, aber ich kann es nicht mit <center>oder margin: 0 autozentrieren.

html css xhtml

— Steve
quelle

152

Ihr Problem kann gelöst werden, wenn Sie diveine feste Breite wie folgt angeben:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

— JacobE
quelle

1

Ich weiß nicht, warum ich nicht daran gedacht habe, obwohl wir die ganze Zeit dieselbe Technik für die vertikale Zentrierung verwenden ... Trotzdem danke, dass Sie mir viel Zeit gespart haben.

— Aayush

1

Was ist, wenn der Benutzer vertikal nach unten gescrollt hat? Das Div wird oben auf der Seite angezeigt, während es im sichtbaren Bereich angezeigt werden sollte

— PUG

Ich zeige Miniaturansichten von dynamisch vergrößerten Bildern in meinem Overlay-Div an, daher kenne ich die Breite nicht.

— PUG

4

Dies ist nur eine Problemumgehung. Stackoverflow.com/questions/1776915/… scheint die Lösung zu sein

— PUG

1

Dies ist keine richtige Antwort. Unterschiedliche Medientypen unterstützen dieses Snippet nicht.

— Sushan

97

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

— Matheus Oliveira
quelle

3

Wie funktioniert das? Können Sie bitte angeben, warum Ihre Antwort gültig ist?

— Afuzzyllama

1

Ich mag diese Methode 99% der Zeit über andere, Sie müssen sich nicht mit Polstern, Rändern usw. befassen. Ich habe noch nie gesehen, dass dies fehlschlägt. Geben Sie beim nächsten Mal ein Beispiel, wenn es für Sie fehlschlägt.

— Dan

1

Das Coole an dieser Lösung ist, dass sie auch mit Prozenten funktioniert, nur nicht sicher, ob sie browserübergreifend kompatibel ist

— Maljukan

1

Beeindruckend. Ich hatte nicht erwartet, dass dies funktioniert, aber es funktionierte für mich wie ein Zauber

— Awais Umar

4

Ich bin damit einverstanden, dass dies die richtige Antwort sein sollte, ein -200px Rand schreit Hack zu mir.

— Mani5556

36

Ich weiß, dass ich zu spät zur Party komme, aber ich dachte, ich würde hier eine Antwort für Leute geben, die einen absoluten Gegenstand horizontal positionieren müssen, wenn Sie seine genaue Breite nicht kennen.

Versuche dies:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Dieselbe Technik kann auch angewendet werden, wenn Sie möglicherweise eine vertikale Ausrichtung benötigen, indem Sie einfach die Eigenschaften wie folgt anpassen:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

— Michael Giovanni Pumo
quelle

1

Was? Das ist fantastisch! Können Sie erklären, wie es funktioniert? Bearbeiten: Habe etwas gejagt und es scheint wie links: 50% verschieben die linke Position des Divs in die Mitte, die nicht wirklich in der Mitte ist. Aber das translateX verschiebt es um 50% der Breite

— Aziz Javed

2

Die absolute Positionierung wird oben links von einem Element positioniert. Wenn Sie translate verwenden, wird es auf den Betrag relativ zu seiner Größe verschoben.

— Michael Giovanni Pumo

3

Michael, wollte nur, dass du es weißt, du warst nicht zu spät zur Partyknospe ... und für diejenigen, die es nicht wissen: transformieren: übersetzen (-50%, -50%); macht sowohl die vertikale als auch die horizontale Zentrierung mit 1 Linie

— Marvel Moe

4

Um es sowohl vertikal als auch horizontal zu zentrieren, gehen Sie wie folgt vor:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

— Armin
quelle

0

Wenn Sie eine relative Breite (in Prozent) benötigen, können Sie Ihr Div in eine absolut positionierte einschließen:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Denken Sie daran, dass das übergeordnete Element relativ positioniert werden muss, um ein Element absolut zu positionieren.

— Dalvallana
quelle

0

Ich hatte das gleiche Problem und meine Einschränkung war, dass ich keine vordefinierte Breite haben kann. Wenn Ihr Element keine feste Breite hat, versuchen Sie dies

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

Ändern Sie dann Ihr HTML so, dass es so aussieht

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

— Usman Shaukat
quelle

0

Oder Sie können relative Einheiten verwenden, z

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

— Aliaksei
quelle

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Erweitern Sie das Snippet

— Panwar
quelle

-22

Ja:

div#thing { text-align:center; }

5

Dadurch wird der Inhalt innerhalb eines Div ausgerichtet. Das Div wird nicht in der Mitte der Seite ausgerichtet. Es wird auch kein absolut positioniertes Div in einer anderen Weise als dem Inhalt darin ausgerichtet, der Teil des Dokumentflusses ist.

— CarterMan