Wie kann ich ein Element horizontal zentrieren?

Lesezeit: 5 Minuten

Wie kann ich a horizontal zentrieren? <div> in einem anderen <div> mit CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Von diesen großartigen Antworten möchte ich nur hervorheben, dass Sie “#inner” eine “Breite” geben müssen, oder es wird “100%” sein, und Sie können nicht sagen, ob es bereits zentriert ist.

– Joni

7. November 2017 um 8:22 Uhr
display:flex; ist am einfachsten zu merken (Chrome bietet Ihnen Anleitungen in DevTools) und unterstützt die Zentrierung auf beiden Achsen.

– Akshay K. Nair

10. Februar um 5:39 Uhr

Wenn Sie keine feste Breite auf der Innenseite einstellen möchten div du könntest so etwas machen:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Das macht das Innere div in ein Inline-Element, das mit zentriert werden kann text-align.

@SabaAhang wäre die richtige Syntax dafür float: none; und wird wohl nur benötigt, weil #inner einen geerbt hat float von beiden left oder right von einer anderen Stelle in Ihrem CSS.

– Doug McLean

12. November 2015 um 9:21 Uhr
Das ist eine schöne Lösung. Denken Sie nur daran, dass das Innere erben wird text-align Sie möchten also möglicherweise die inneren einstellen text-align zu initial oder ein anderer Wert.

– pmoleri

18. November 2016 um 21:52 Uhr

Safari erfordert ab sofort noch -webkit Flags für Flexbox (display: -webkit-flex; und -webkit-align-items: center; und -webkit-justify-content: center;)

– Joe Hansen

23. Juli 2015 um 15:59 Uhr
Ich denke immer, dass die Verwendung von Lots-Code eine schlechte Praxis ist. Mit diesem Code zentriere ich beispielsweise mein div: display: table; Rand: automatisch; simpel und einfach

– Simon

4. November 2019 um 18:11 Uhr

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

Stellen Sie sicher, dass das übergeordnete Element ist positioniertdh relativ, fixiert, absolut oder sticky.

Wenn Sie die Breite Ihres div nicht kennen, können Sie verwenden transform:translateX(-50%); anstelle der negativen Marge.

Mit CSS-Berechnung()kann der Code noch einfacher werden:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Das Prinzip ist immer noch dasselbe; Legen Sie den Artikel in die Mitte und gleichen Sie die Breite aus.

Ich mag diese Lösung nicht, denn wenn das innere Element zu breit für den Bildschirm ist, können Sie nicht horizontal über das gesamte Element scrollen. margin: 0 auto funktioniert besser.

– Auch

30. Dezember 2015 um 4:02 Uhr
Rand links: auto; Rand rechts: auto; zentriert ein Element auf Blockebene

– Banane für Waage

10. November 2017 um 19:15 Uhr
Die Standardbreite für die meisten Elemente auf Blockebene ist auto, was den verfügbaren Bereich auf dem Bildschirm ausfüllt. Durch die Zentrierung wird es in dieselbe Position wie die linke Ausrichtung versetzt. Wenn Sie möchten, dass es visuell zentriert ist, sollten Sie eine Breite festlegen (oder eine maximale Breite, obwohl Internet Explorer 6 und früher dies nicht unterstützen und IE 7 dies nur im Standardmodus unterstützt).

– Banane für Waage

10. November 2017 um 19:16 Uhr

Ich habe erstellt dieses Beispiel zu zeigen, wie es geht vertikal und horizontal align.

Der Code ist im Grunde dieser:

#outer {
 position: relative;
}

und…

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Und es wird in der bleiben center auch wenn du Größe ändern Ihr Bildschirm.

Ich mag diese Lösung nicht, denn wenn das innere Element zu breit für den Bildschirm ist, können Sie nicht horizontal über das gesamte Element scrollen. margin: 0 auto funktioniert besser.

– Auch

30. Dezember 2015 um 4:02 Uhr
Rand links: auto; Rand rechts: auto; zentriert ein Element auf Blockebene

– Banane für Waage

10. November 2017 um 19:15 Uhr
Die Standardbreite für die meisten Elemente auf Blockebene ist auto, was den verfügbaren Bereich auf dem Bildschirm ausfüllt. Durch die Zentrierung wird es in dieselbe Position wie die linke Ausrichtung versetzt. Wenn Sie möchten, dass es visuell zentriert ist, sollten Sie eine Breite festlegen (oder eine maximale Breite, obwohl Internet Explorer 6 und früher dies nicht unterstützen und IE 7 dies nur im Standardmodus unterstützt).

– Banane für Waage

10. November 2017 um 19:16 Uhr

Einige Poster haben die Verwendung von CSS 3 zum Zentrieren erwähnt display:box.

Diese Syntax ist veraltet und sollte nicht mehr verwendet werden. [See also this post].

Nur der Vollständigkeit halber ist hier die neueste Methode zum Zentrieren in CSS 3 mithilfe von Flexibles Box-Layout-Modul.

Wenn Sie also ein einfaches Markup haben wie:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

… und Sie Ihre Elemente innerhalb der Box zentrieren möchten, benötigen Sie Folgendes für das übergeordnete Element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Wenn Sie ältere Browser unterstützen müssen, die eine ältere Syntax für Flexbox verwenden Hier ist ein guter Ort, um zu schauen.

Was meinst du mit “Syntax ist veraltet”, ist sie veraltet?

– Kongaraju

6. September 2013 um 10:18 Uhr
Die Flexbox-Spezifikation hat drei große Überarbeitungen durchlaufen. Der neueste Entwurf stammt vom September 2012, wodurch alle vorherigen Entwürfe offiziell verworfen werden. Die Browserunterstützung ist jedoch lückenhaft (insbesondere alte Android-Browser): stackoverflow.com/questions/15662578/…

– Zimt

1. Oktober 2013 um 20:33 Uhr
Ist nicht “justify-content: center;” für die vertikale Ausrichtung und die “align-items: center;” für die horizontale Ausrichtung?

– Wouter Vanherck

22. März 2017 um 12:04 Uhr
@WouterVanherck es kommt darauf an flex-direction Wert. Wenn es “Zeile” ist (Standardeinstellung) – dann justify-content: center; ist für die horizontale Ausrichtung (wie ich in der Antwort erwähnt habe) Wenn es “Spalte” ist – dann justify-content: center; ist für die vertikale Ausrichtung.

– Danield

22. März 2017 um 12:29 Uhr

13380400cookie-checkWie kann ich ein Element horizontal zentrieren?

#Ausrichtung #CSS #html #Zentrierung