5105 Stimmen

Lukas avatar

Wie man ein Element horizontal zentriert

Gefragt el 22 de September, 2008
Wann wurde die Frage gestellt
4577849 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Wie kann ich eine horizontale Zentrierung einer <div> in einem anderen <div> CSS verwenden?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Gefragt el 22 de September, 2008 von Lukas

37 Stimmen

Avatar von Jony

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.

Kommentiert el 7 de November, 2017 von Jony

1 Stimmen

Avatar von Akshay K Nair

display:flex; ist am einfachsten zu merken (Chrome gibt Ihnen Anleitungen in DevTools) und unterstützt die Zentrierung auf beiden Achsen.

Kommentiert el 10 de Februar, 2022 von Akshay K Nair

Antworten

Zu viele Anzeigen?

8voto

anand jothi avatar
anand jothi Punkte 45 
#inner {
    width: 50%;
    margin: 0 auto;
}
Beantwortet el 15 de Kann, 2015 von anand jothi (45 Punkte )

7voto

Sawan mishra avatar
Sawan mishra Punkte 651

Dies ist das beste Beispiel für die horizontale Zentrierung eines <div>

#outer {
    display: flex;
    align-items: center;
    justify-content: center;
}

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <div id="outer">
            <div id="inner">Foo foo</div>
        </div>
    </body>
</html>
Beantwortet el 23 de November, 2019 von Sawan mishra (651 Punkte )

6voto

proseosoc avatar
proseosoc Punkte 735

Zentrieren eines Elements ohne Wrapper/Parent mit dynamischer Höhe und Breite

Keine Nebenwirkung: Die Breite eines zentrierten Elements wird nicht auf weniger als die Breite des Ansichtsfensters begrenzt, wenn Ränder in Flexbox innerhalb eines zentrierten Elements verwendet werden.

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

Horizontal + vertikal zentriert, wenn seine Höhe gleich der Breite ist:

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
Beantwortet el 2 de Marsch, 2021 von proseosoc (735 Punkte )

6voto

Abdullah Ch avatar
Abdullah Ch Punkte 984

Tun Sie es einfach:

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

CSS

#outer{
  display: grid;
  place-items: center;
}
Beantwortet el 12 de April, 2021 von Abdullah Ch (984 Punkte )

6voto

Hassan Siddiqui avatar
Hassan Siddiqui Punkte 2718

Machen Sie es einfach!

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
Beantwortet el 26 de Marsch, 2019 von Hassan Siddiqui (2718 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X