Flexbox: horizontal und vertikal zentrieren

669

So zentrieren Sie div mithilfe der Flexbox horizontal und vertikal innerhalb des Containers. Im folgenden Beispiel möchte ich jede Zahl untereinander (in Zeilen), die horizontal zentriert sind.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

bsr
quelle
In Ihrem CSS haben Sie, row{was keine Auswirkung auf Zeilen hat. Wenn Sie es in .row{das Ergebnis ändern, wäre das völlig anders.
Hamid Mayeli

Antworten:

750

Ich denke, Sie wollen so etwas wie das Folgende.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Siehe Demo unter: http://jsfiddle.net/audetwebdesign/tFscL/

Ihre .flex-itemElemente sollten auf Blockebene ( divstatt span) sein, wenn die Höhe und die obere / untere Polsterung ordnungsgemäß funktionieren sollen.

Stellen Sie außerdem .rowdie Breite auf autoanstelle von ein 100%.

Ihre .flex-containerEigenschaften sind in Ordnung.

Wenn Sie möchten .row, dass das Bild vertikal im Ansichtsfenster zentriert wird, weisen Sie htmlund eine Höhe von 100% zu und setzen Sie bodydie bodyRänder auf Null .

Beachten Sie, dass .flex-containereine Höhe erforderlich ist, um den vertikalen Ausrichtungseffekt zu sehen. Andernfalls berechnet der Container die Mindesthöhe, die zum Einschließen des Inhalts erforderlich ist und in diesem Beispiel geringer ist als die Höhe des Ansichtsfensters.

Fußnote:
Die flex-flow, flex-direction, flex-wrapEigenschaften haben könnten diese Konstruktion leichter gemacht zu implementieren. Ich denke, dass der .rowContainer nicht benötigt wird, es sei denn, Sie möchten den Elementen (Hintergrundbild, Rahmen usw.) ein Styling hinzufügen.

Eine nützliche Ressource ist: http://demo.agektmr.com/flexbox/

Marc Audet
quelle
5
Flex-Elemente müssen nicht auf Blockebene sein, es sei denn, der darin enthaltene Inhalt erfordert dies. Außerdem haben Sie allen Anzeigeeigenschaften ein Präfix vorangestellt, jedoch keine der anderen Flexbox-Eigenschaften (die in den anderen Entwürfen unterschiedliche Namen haben) vorangestellt.
Cimmanon
1
@cimmanon Ich stimme Ihnen in Bezug auf die Blockebene zu und habe meinen Beitrag entsprechend bearbeitet. Die Blockebene ist für die Ausrichtung nicht erforderlich, kann jedoch erforderlich sein, wenn der Benutzer die Höhe usw. angeben möchte. Ich habe mir die Freiheit über die Browserpräfixe genommen und nur einen perfekten Browser angenommen, um zu einer funktionierenden Demo zu gelangen. Nochmals vielen Dank für Ihren Kommentar, schätzen Sie das Feedback.
Marc Audet
1
Wenn es überläuft, schneidet es die Spitze ab. i.imgur.com/3dgFfQK.png Wie kann dies vermieden werden?
Brian Gates
1
@BrianGates Wenn die Höhe des Fensters zu kurz ist, wie sollen die 4 Elemente angezeigt werden, 2x2, 1x4?
Marc Audet
2
Die Lösung ist hier: stackoverflow.com/questions/24538100/…
Brian Gates
252

So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Nachfolgend finden Sie zwei allgemeine Zentrierlösungen.

Eine für vertikal ausgerichtete Flex-Elemente ( flex-direction: column) und die andere für horizontal ausgerichtete Flex-Elemente ( flex-direction: row).

In beiden Fällen kann die Höhe der zentrierten Divs variabel, undefiniert, unbekannt sein, was auch immer. Die Höhe der zentrierten Divs spielt keine Rolle.

Hier ist der HTML-Code für beide:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (ohne dekorative Stile)

Wenn flexible Elemente vertikal gestapelt werden:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

Geben Sie hier die Bildbeschreibung ein

DEMO


Wenn flexible Elemente horizontal gestapelt werden:

Passen Sie die flex-directionRegel anhand des obigen Codes an.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

Geben Sie hier die Bildbeschreibung ein

DEMO


Zentrieren des Inhalts der Flex-Elemente

Der Umfang eines Flex-Formatierungskontexts ist auf eine Eltern-Kind-Beziehung beschränkt. Nachkommen eines Flex-Containers außerhalb der Kinder nehmen nicht am Flex-Layout teil und ignorieren die Flex-Eigenschaften. Im Wesentlichen sind Flex-Eigenschaften nicht über die Kinder hinaus vererbbar.

Daher müssen Sie immer display: flexoder display: inline-flexauf ein übergeordnetes Element anwenden, um Flex-Eigenschaften auf das untergeordnete Element anzuwenden.

Um Text oder anderen Inhalt eines Flex-Elements vertikal und / oder horizontal zu zentrieren, machen Sie das Element zu einem (verschachtelten) Flex-Container und wiederholen Sie die Zentrierungsregeln.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Weitere Details hier: Wie kann ich Text in einer Flexbox vertikal ausrichten?

Alternativ können Sie margin: autodas Inhaltselement des Flex-Elements anwenden .

p { margin: auto; }

Weitere Informationen zu Flex- autoRändern finden Sie hier: Methoden zum Ausrichten von Flex-Elementen (siehe Kasten Nr. 56).


Zentrieren mehrerer Zeilen flexibler Elemente

Wenn ein Flex-Container mehrere Linien hat (aufgrund des Umbruchs), ist die align-contentEigenschaft für die Ausrichtung über die Achse erforderlich.

Aus der Spezifikation:

8.4. Packing Flex Lines: die align-content Eigenschaft

Die align-contentEigenschaft richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn auf der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie bei der justify-contentAusrichtung einzelner Elemente auf der Hauptachse. Beachten Sie, dass diese Eigenschaft keine Auswirkungen auf einen einzeiligen Flex-Container hat.

Weitere Details hier: Wie funktioniert Flex-Wrap mit Align-Self, Align-Items und Align-Content?


Browser-Unterstützung

Flexbox wird von allen gängigen Browsern außer IE <10 unterstützt . Einige neuere Browserversionen wie Safari 8 und IE10 erfordern Herstellerpräfixe . Verwenden Sie Autoprefixer , um schnell Präfixe hinzuzufügen . Weitere Details in dieser Antwort .


Zentrierlösung für ältere Browser

Eine alternative Zentrierungslösung mit CSS-Tabelle und Positionierungseigenschaften finden Sie in dieser Antwort: https://stackoverflow.com/a/31977476/3597276

Michael Benjamin
quelle
können wir es horizontal rechts, links und vertikal zentrieren?
Kapil
2
@kapil, passen Sie die Rechtfertigung-Inhalt- Eigenschaft auf Leerzeichen zwischen oder Leerzeichen um ... jsfiddle.net/8o29y7pd/105
Michael Benjamin
3
Diese Antwort sollte oben sein. Die Verwendung von Flex sollte der bevorzugte Weg sein, da es sich gut über Geräte und Bildschirm skalieren lässt. Es ist weitaus einfacher als die Verwendung von Floats und die Verwaltung mehrerer Divs.
SeaWarrior404
Dh 11 funktioniert nicht richtig horizontal und vertikal in der Mitte
Job
1
Perfekte Antwort, wahrscheinlich die beste bei Google!
JAN
43

Hinzufügen

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

auf das Containerelement von allem, was Sie zentrieren möchten. Dokumentation: Inhalt begründen und Elemente ausrichten .

ben
quelle
3
Danke für die prägnante Antwort. Obwohl alle obigen Worte in Ordnung sind, sind diese 3 Zeilen genau das, wonach ich hier gesucht habe (nun, display: inline-flexin meinem Fall, aber das war eine einfache Bearbeitung.)
Jeff Ward
27

Vergessen Sie nicht, wichtige Browser-spezifische Attribute zu verwenden:

Ausrichtungselemente: Mitte; ->

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

Rechtfertigungsinhalt: Mitte; ->

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

Sie können diese beiden Links lesen, um flex besser zu verstehen: http://css-tricks.com/almanac/properties/j/justify-content/ und http://ptb2.me/flexbox/

Viel Glück.

QMaster
quelle
1
Dies ist ein guter Punkt, für heute (um nur die neuesten Browser zu unterstützen) benötigen Sie nur die letzten beiden Zeilen - Webkit .. für Safari und die letzte für alle anderen
Pete Kozak
1
+1, da alte Arbeitsentwürfe von 2009 und März 2012 immer noch einen signifikanten Benutzeranteil haben (laut caniuse.com zusammen etwa 8% ).
Benebun
Flext funktioniert nicht auf Safari. Wie können Sie dieses Problem lösen?
user3378649
Ich habe vor vielen Tagen die letzte Version von Safari unter Windows überprüft und erinnere mich nicht sehr gut daran, aber ich werde sie überprüfen und Ihnen sagen. Sagen Sie mir bitte, welche Version der Safari Sie gemeint haben. und auf welchem ​​Betriebssystem?
QMaster
@ user3378649 Neueste Safari-Version könnte Flex-Box unterstützen, siehe diesen Link: caniuse.com/#search=flexbox
QMaster
15

1 - Setzen Sie CSS für übergeordnetes Div auf display: flex;

2 - Setzen Sie CSS für das übergeordnete Div auf flex-direction: column;
Beachten Sie, dass dadurch der gesamte Inhalt innerhalb dieser Div-Zeile von oben nach unten verschoben wird. Dies funktioniert am besten, wenn das übergeordnete div nur das untergeordnete und nichts anderes enthält.

3 - Setzen Sie CSS für übergeordnetes Div auf justify-content: center;

Hier ist ein Beispiel dafür, wie das CSS aussehen wird:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

MelanieP
quelle
8

diplay: flex;denn sein Behälter und margin:auto;sein Gegenstand funktionieren perfekt.

HINWEIS: Sie müssen das widthund einrichten height, um den Effekt zu sehen.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>

Polar
quelle
3

Wenn Sie einen Text in einem Link zentrieren müssen, reicht dies aus:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

Löwe
quelle
1
Süss! Manchmal habe ich das Gefühl, dass ich zu flexibel für Flexbox bin.) Angenommen, ich brauche mehr Übung, ein Teil der Logik ist noch unklar. Danke, Leo!
Zoltán
3

margin: autofunktioniert perfekt mit flexbox. Es wird vertikal und horizontal zentralisiert.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>

Aksana Tolstoguzova
quelle
1

ERGEBNIS: Code

CODE

HTML:

<div class="flex-container">
  <div class="rows">

    <div class="row">
      <span class="flex-item">1</span>
    </div>
    <div class="row">
      <span class="flex-item">2</span>
    </div>
    <div class="row">
      <span class="flex-item">3</span>
    </div>
    <div class="row">
      <span class="flex-item">4</span>
    </div>

  </div>  
</div>

CSS:

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

Dabei wird flex-containerdiv verwendet, um Ihr rowsdiv vertikal und horizontal zu zentrieren, und rowsdiv wird verwendet, um Ihre "Elemente" zu gruppieren und sie in einer spaltenbasierten zu ordnen.

Wilson
quelle
0
    .flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
Carpiee
quelle
Während dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum das Problem gelöst wird, den langfristigen Wert der Antwort verbessern.
Piotr Labunski
-7

Verwenden von CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Schauen Sie HIER

Marco Allori
quelle
1
Da dies von modernen Browsern mit reiner Flexbox einfach und umfassend unterstützt wird, ist Ihre Bibliothekslösung sicherlich nicht erforderlich. Zumal er gefragt hat, wie es mit Flex Box geht, nicht mit einer CSS-Bibliothek.
Bungleofsketches