Flexbox: horizontal und vertikal zentrieren

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

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/

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 */
}

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

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

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 .

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.

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

Sie können nutzen

display: flex; align-items: center; justify-content: center;

auf Ihrer übergeordneten Komponente

https://repl.it/repls/TomatoImaginaryInitialization

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>

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>

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>

ERGEBNIS:

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.

    .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;
}

Verwenden von CSS +

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

Schauen Sie HIER