Flexbox: centru pe orizontală și pe verticală

Cred ca vrei ceva de genul următor.

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>

Vezi demo-ul la: http://jsfiddle.net/audetwebdesign/tFscL/

Ta .flex-element elemente ar trebui să fie la nivel de bloc (div în loc de span), dacă doriți înălțimea și top/bottom padding pentru a funcționa corect.

De asemenea, pe .rând, setați lățimea la "auto" în loc de100%`.

Ta `.flex-container de proprietăți sunt bine.

Dacă vrei.rând să fie centrat pe verticală în portul de vizualizare, atribui 100% înălțimea la html și "corpul", și, de asemenea, zero "corpul" a marjelor.

Rețineți că.flex-container are o înălțime pentru a vedea alinierea verticală efect, în caz contrar, container calculează înălțimea minimă necesară pentru a încadra conținutul, care este mai mică decât portul de vizualizare înălțime în acest exemplu.

Nota de subsol: Anii flex-flow, flex-direcție, flex-folie de proprietăți ar putea fi făcut acest design mai ușor să pună în aplicare. Cred că.rând container nu este necesară dacă doriți să adăugați unele styling jurul elementelor (imagine de fundal, frontiere și așa mai departe).

O resursă utilă este: http://demo.agektmr.com/flexbox/

Cum pentru Centrul de Elemente pe Verticală și pe Orizontală în Flexbox

Mai jos sunt două general de centrare soluții.

Unul vertical aliniat flex elemente (flex-direcție: coloana) și alta orizontală-aliniat flex elemente (flex-direcție: rând).

În ambele cazuri, înălțimea centrat divs poate fi variabilă, nedefinit, necunoscut, orice. Înălțimea centrat divs nu't contează.

Aici's HTML pentru ambele:

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS (cu excepția stiluri decorative)

Când flex elemente sunt așezate vertical:

#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](http://jsfiddle.net/8o29y7pd/)

Când flex elemente sunt așezate orizontal:

Reglați `flex-direcția regula din codul de mai sus.

#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](http://jsfiddle.net/8o29y7pd/3/)

Centrarea conținutului flex elemente

Domeniul de aplicare al o flex formatare context este limitată la o relație părinte-copil. Descendenții unui flex recipient dincolo copiii nu participă la flex layout și va ignora flex proprietăți. În esență, flex proprietăți nu sunt transmisibile dincolo copii.

Prin urmare, va trebui întotdeauna să se aplice display: flex " sau " display: inline-flex de la un element părinte, în scopul de a aplica flex proprietăți pentru copil.

În scopul de a vertical și/sau orizontal centru de text sau alte tipuri de conținut conținute într-un flex element, face un element (imbricate) flex container, și se repetă de centrare reguli.

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

Mai multe detalii aici: https://stackoverflow.com/q/25311541/3597276

Alternativ, puteți aplica margin: auto la conținutul element de flex element.

p { margin: auto; }

Afla despre flex "auto" marjele de aici: Metode pentru Alinierea Flex Elemente (a se vedea caseta#56).

Centrare mai multe linii de flex elemente

Atunci când un flex container are mai multe linii (din cauza ambalaj) la `align-conținutul de proprietate va fi necesar pentru cross-axa de aliniere.

De la spec.:

8.4. Ambalare Flex Linii: align-conținut proprietăți

align-conținutul de proprietate se aliniază un flex recipient linii în flex container atunci când nu există spațiu suplimentar în transversală, similar cu cum justifica-conținut aliniază elementele individuale în principalele axe. Rețineți că această proprietate nu are efect pe o singură linie flex container.

Mai multe detalii aici: https://stackoverflow.com/q/42613359/3597276

suport pentru Browser-ul

Flexbox este susținută de toate browserele majore, cu excepția IE < 10. Unele recente versiuni de browser, cum ar fi Safari 8 și IE10, necesită furnizor de prefixe. Pentru o modalitate rapidă de a adăuga prefixe folosi Autoprefixer. Mai multe detalii în acest răspuns.

Centrarea soluție pentru browsere mai vechi

Pentru o alternativă de centrare soluție folosind CSS masă și proprietățile de poziționare a vedea acest răspuns: https://stackoverflow.com/a/31977476/3597276

Adauga

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

pentru elementul container de ce vrei să center. Documentație: justifica-conținut și align-articole.

Don't uitat să utilizați browsere web importante atribute specifice:

aliniați-elemente: center; -->

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

justifica-conținut: center; -->

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

Ai putea să citească aceste două link-uri pentru o mai bună înțelegere flex: http://css-tricks.com/almanac/properties/j/justify-content/ și http://ptb2.mi/flexbox/

Noroc.

1 - Set CSS pe div părinte să display: flex;

2 - Set CSS pe div părinte să flex-direcție: coloană;
Rețineți că acest lucru va face toate conținut în care div linie de sus pana jos. Aceasta va funcționa cel mai bine dacă părintele div conține doar copilul și nimic altceva.

3 - Set CSS pe div părinte să-și justifica-conținut: center;`

Aici este un exemplu a ceea ce CSS va arata asa:

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

diplay: flex; pentru a's container șimargin:auto; pentru a's element funcționează perfect.

NOTĂ: trebuie să setați "lățime" și "înălțime" pentru a vedea efectul.

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

margin: auto funcționează perfect cu flexbox. Se centralizează pe verticală și pe orizontală.

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

.flex-container {
  display: flex;

  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  JS


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

Dacă aveți nevoie pentru a centra un text într-o legătură, acest lucru va face truc:

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>

Puteți face uz de

display: flex; aliniați-elemente: center; justifica-conținut: center;

pe părintele tău componentă

https://repl.it/repls/TomatoImaginaryInitialization

Folosind CSS+

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

avea o privire de AICI