Flexbox: centrum poziomo i pionowo

Jak wyśrodkować div poziomo i pionowo w kontenerze za pomocą Flexbox. W poniższym przykładzie chcę, aby każda liczba była pod sobą (w rzędach), które są wyśrodkowane w poziomie.

.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

Myślę, że chcesz czegoś takiego.

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>

Zobacz demo na: http://jsfiddle.net/audetwebdesign/tFscL/

Twoje .flex-itemelementy powinny być na poziomie bloku ( divzamiast span), jeśli chcesz wysokość i górną / dolną dopełnienie do pracy prawidłowo.

Ponadto, .rowustaw szerokość na autozamiast 100%.

Twoje .flex-containernieruchomości są w porządku.

Jeśli chcesz, .rowaby były wyśrodkowane pionowo w porcie widoku, przypisz 100% wysokości do htmli body, a także wyzeruj bodymarginesy.

Zauważ, że .flex-containerpotrzebna jest wysokość, aby zobaczyć efekt wyrównania w pionie, w przeciwnym razie kontener oblicza minimalną wysokość potrzebną do zamknięcia zawartości, która jest mniejsza niż wysokość portu widoku w tym przykładzie.

Przypis: , , właściwości mógł stworzyć ten projekt łatwiejsze do wdrożenia. Myślę, że pojemnik nie jest potrzebny, chyba że chcesz dodać stylizację wokół elementów (obraz tła, obramowania i tak dalej).
flex-flowflex-directionflex-wrap.row

Przydatnym zasobem jest: http://demo.agektmr.com/flexbox/

Jak wyśrodkować elementy w pionie i poziomie w Flexbox

Poniżej znajdują się dwa ogólne rozwiązania centrowania.

Jeden dla elementów elastycznych wyrównanych w pionie ( flex-direction: column), a drugi dla elementów elastycznych wyrównanych w poziomie ( flex-direction: row).

W obu przypadkach wysokość wyśrodkowanych div może być zmienna, niezdefiniowana, nieznana, cokolwiek. Wysokość wyśrodkowanych div nie ma znaczenia.

Oto kod HTML dla obu:

<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 (z wyłączeniem stylów dekoracyjnych)

Gdy elementy elastyczne są ułożone pionowo:

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

PRÓBNY

Gdy elementy elastyczne są ułożone poziomo:

Dostosuj flex-directionregułę z powyższego kodu.

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

PRÓBNY

Centrowanie zawartości elementów elastycznych

Zakres kontekstu formatowania elastycznego jest ograniczony do relacji rodzic-dziecko. Potomkowie kontenera elastycznego poza dziećmi nie uczestniczą w układzie flex i będą ignorować właściwości flex. Zasadniczo właściwości flex nie są dziedziczone poza dziećmi.

Stąd, zawsze trzeba stosować display: flexalbo display: inline-flexdo elementu nadrzędnego w celu zastosowania właściwości Flex dziecka.

Aby wyśrodkować tekst w pionie i / lub w poziomie lub inną zawartość zawartą w elemencie flex, ustaw element jako (zagnieżdżony) kontener flex i powtórz reguły centrowania.

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

Więcej informacji tutaj: Jak wyrównać tekst pionowo w flexbox?

Alternatywnie można zastosować margin: autodo elementu treści elementu flex.

p { margin: auto; }

Dowiedz się więcej o automarginesach elastyczności tutaj: Metody wyrównywania elementów elastycznych (patrz ramka # 56).

Centrowanie wielu linii elementów elastycznych

Gdy elastyczny kontener ma wiele linii (z powodu zawijania), align-contentwłaściwość będzie konieczna do wyrównania osi.

Ze specyfikacji:

8.4 Pakowanie Flex Lines: align-content właściwość

align-contentNieruchomość wyrównuje linie flex kontenera wewnątrz elastycznego pojemnika, gdy jest dodatkowa przestrzeń w przekroju osi, podobny do tego, jak justify-contentwyrównuje poszczególnych elementów w głównej osi. Uwaga: ta właściwość nie ma wpływu na jednowierszowy elastyczny kontener.

Więcej informacji tutaj: Jak flex-wrap działa z align-self, align-items i align-content?

Obsługa przeglądarki

Flexbox jest obsługiwany przez wszystkie główne przeglądarki, z wyjątkiem IE <10 . Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają prefiksów dostawców . Aby szybko dodać prefiksy, skorzystaj z Autoprefixera . Więcej szczegółów w tej odpowiedzi .

Rozwiązanie centrujące dla starszych przeglądarek

Aby znaleźć alternatywne rozwiązanie centrowania wykorzystujące właściwości tabeli CSS i właściwości pozycjonowania, zobacz tę odpowiedź: https://stackoverflow.com/a/31977476/3597276

Dodaj

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

do elementu kontenera tego, co chcesz wyśrodkować. Dokumentacja: justify-content i align-items .

Nie zapomnij użyć ważnych atrybutów przeglądarki:

elementy wyrównujące: środek; ->

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

justify-content: center; ->

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

Możesz przeczytać te dwa linki, aby lepiej zrozumieć flex: http://css-tricks.com/almanac/properties/j/justify-content/ i http://ptb2.me/flexbox/

Powodzenia.

1 - Ustaw CSS dla rodzica div na display: flex;

2 - Ustaw CSS na nadrzędnym div na flex-direction: column;
Zwróć uwagę, że spowoduje to, że cała zawartość w tym div div będzie od góry do dołu. Działa to najlepiej, jeśli div rodzica zawiera tylko dziecko i nic więcej.

3 - Ustaw CSS dla rodzica div na justify-content: center;

Oto przykład, jak będzie wyglądał CSS:

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

Możesz skorzystać z

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

na komponencie nadrzędnym

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;za jego pojemnik i margin:auto;przedmiot działa idealnie.

UWAGA: Musisz skonfigurować widthi, heightaby zobaczyć efekt.

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

Jeśli chcesz wyśrodkować tekst w linku, to załatwi sprawę:

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: autodziała idealnie z Flexbox. Centralizuje się w pionie i poziomie.

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>

WYNIK:

KOD

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

gdzie flex-containerdiv służy do wyśrodkowania w pionie i poziomie rowsdiv, a rowsdiv służy do grupowania twoich „przedmiotów” i porządkowania ich w kolumnach.

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

Korzystanie z CSS +

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

spójrz TUTAJ