it-swarm.com.de

Flexbox: horizontal und vertikal zentrieren

So zentrieren Sie div mithilfe der Flexbox horizontal und vertikal im Container. Im folgenden Beispiel möchte ich jede Nummer 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

553
bsr

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-item -Elemente sollten Blockebene (div anstelle von span) haben, wenn die Höhe und die Polsterung oben/unten ordnungsgemäß funktionieren sollen.

Stellen Sie außerdem bei .row die Breite auf auto anstelle von 100% ein.

Ihre .flex-container -Eigenschaften sind in Ordnung.

Wenn der .row im Ansichtsfenster vertikal zentriert werden soll, weisen Sie html und body eine Höhe von 100% zu und setzen Sie die Ränder body auf Null.

Beachten Sie, dass .flex-container eine Höhe benötigt, um den vertikalen Ausrichtungseffekt zu erkennen. Andernfalls berechnet der Container die zum Einschließen des Inhalts erforderliche Mindesthöhe, die in diesem Beispiel geringer ist als die Höhe des Ansichtsfensters.

Fußnote:
Die Eigenschaften flex-flow, flex-direction, flex-wrap hätten die Implementierung dieses Entwurfs erleichtern können. Ich denke, dass der Container .row nicht benötigt wird, es sei denn, Sie möchten die Elemente (Hintergrundbild, Rahmen usw.) mit Stilen versehen.

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

628
Marc Audet

So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Nachfolgend finden Sie zwei allgemeine Zentrierungslö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 sein, undefiniert, unbekannt, 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 */
}

enter image description here

DEMO


Wenn flexible Elemente horizontal gestapelt werden:

Passen Sie die flex-direction -Regel aus dem obigen Code 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;
}

enter image description here

DEMO


Zentrieren des Inhalts der Flex-Elemente

Der Umfang eines flexiblen 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. Flex-Eigenschaften sind im Wesentlichen für die Kinder nicht vererbbar.

Daher müssen Sie immer display: flex oder display: inline-flex auf 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 wird Text in einer Flexbox vertikal ausgerichtet?

Alternativ können Sie margin: auto auf das Inhaltselement des Flex-Elements anwenden.

p { margin: auto; }

Weitere Informationen zu den Rändern von flex auto finden Sie hier: Methoden zum Ausrichten von Flex-Elementen (siehe Kasten 56).


Zentrieren mehrerer Zeilen von flexiblen Elementen

Wenn ein Flex-Container (aufgrund von Umbruch) mehrere Zeilen aufweist, ist die Eigenschaft align-content für die achsübergreifende Ausrichtung erforderlich.

Aus der Spezifikation:

8.4. Packen von Flex Lines: Die Eigenschaft align-content

Die align-content -Eigenschaft richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn in der Querachse mehr Platz vorhanden ist, ähnlich wie justify-content einzelne Elemente innerhalb der Hauptachse ausrichtet. Beachten Sie, dass diese Eigenschaft keinen Einfluss 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 unterstützt, außer IE <1 . Einige neuere Browserversionen, wie Safari 8 und IE10, erfordern Herstellerpräfixe . Um schnell Präfixe hinzuzufügen, verwenden Sie Autoprefixer . Weitere Details in diese Antwort .


Zentrierlösung für ältere Browser

Eine alternative Lösung zum Zentrieren mithilfe von CSS-Tabellen und Positionierungseigenschaften finden Sie in der folgenden Antwort: https://stackoverflow.com/a/31977476/3597276

224
Michael_B

Hinzufügen

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

auf das Containerelement dessen, was Sie zentrieren möchten. Dokumentation: Inhalt ausrichten und Elemente ausrichten .

34
ben
display: flex;
align-items: center;
justify-content: center;
29
Asiya Fatima

Vergessen Sie nicht, wichtige browserspezifische Attribute zu verwenden:

align-Items: Center; ->

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

26
QMaster

1 - Setze CSS auf parent div auf display: flex;

2 - Setze CSS auf parent div auf flex-direction: column;
Beachten Sie, dass der gesamte Inhalt in dieser div-Zeile von oben nach unten angezeigt wird. Dies funktioniert am besten, wenn die übergeordnete div nur das untergeordnete und nichts anderes enthält.

3 - Setze CSS auf parent div auf justify-content: center;

Hier ist ein Beispiel, wie das CSS aussehen wird:

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

diplay: flex; für den Container und margin:auto; für den Gegenstand funktioniert perfekt.

HINWEIS: Sie müssen width und height einstellen, 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>
6
Polar

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>
3
Leo

margin: auto funktioniert perfekt mit der Flexbox. Es zentriert vertikal und horizontal.

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>
3