Flexbox: yatay ve dikey olarak ortala

Div'ı flexbox kullanarak yatay ve dikey olarak konteyner içinde ortalamak. Aşağıdaki örnekte, her bir sayının yatay olarak ortalanmış (satırlar halinde) birbirlerinin altında olmasını istiyorum.

.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

Aşağıdaki gibi bir şey istediğinizi düşünüyorum.

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>

Demoyu şurada görün: http://jsfiddle.net/audetwebdesign/tFscL/

Kişisel .flex-itemelementler (blok seviyesi olmalıdır divyerine spandüzgün çalışması için yükseklik ve üst / alt dolgu istiyorsanız).

Ayrıca, açık olarak .row, genişliği autoyerine olarak ayarlayın 100%.

Kişisel .flex-containerözellikleri iyidir.

İsterseniz .rowiçin, görünüm penceresinde dikey atama% 100 yüksekliğini merkezli edilecek htmlve bodyve ayrıca sıfır dışarı bodymarjlar.

.flex-containerDikey hizalama efektini görmek için bir yüksekliğe ihtiyaç duyduğunu unutmayın , aksi takdirde kap, içeriği kapatmak için gereken minimum yüksekliği hesaplar; bu, bu örnekte görünüm bağlantı noktası yüksekliğinden daha azdır.

Dipnot: , , özellikleri bu tasarım daha kolay uygulamak için yapılmış olabilirdi. Öğelerin etrafına biraz stil eklemek istemiyorsanız kapsayıcıya ihtiyaç olmadığını düşünüyorum (arka plan görüntüsü, kenarlıklar vb.).
flex-flowflex-directionflex-wrap.row

Yararlı bir kaynak: http://demo.agektmr.com/flexbox/

Flexbox'ta Öğeleri Dikey ve Yatay Olarak Ortalama

Aşağıda iki genel merkezleme çözümü verilmiştir.

Biri dikey olarak hizalanmış esnek öğeler için ( flex-direction: column) ve diğeri yatay olarak hizalanmış esnek öğeler için ( flex-direction: row).

Her iki durumda da, ortalanmış div'lerin yüksekliği, değişken, tanımsız, bilinmeyen, her neyse olabilir. Ortalanmış div'lerin yüksekliği önemli değil.

İşte her ikisi için de HTML:

<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 (dekoratif stiller hariç)

Esnek öğeler dikey olarak istiflendiğinde:

#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

Esnek öğeler yatay olarak istiflendiğinde:

flex-directionKuralı yukarıdaki koddan ayarlayın .

#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

Esnek öğelerin içeriğini merkezleme

Bir kapsamı esnek biçimlendirme bağlamda bir ebeveyn-çocuk ilişkisine sınırlıdır. Çocukların ötesindeki esnek bir konteynerin torunları, esnek düzene katılmazlar ve esnek özellikleri göz ardı ederler. Esasen, esnek özellikler çocukların ötesinde kalıtsal değildir.

Bu nedenle, çocuğa esnek özellikler uygulamak için her zaman display: flexveya display: inline-flexbir üst öğeye uygulamanız gerekir .

Esnek bir öğede bulunan metni veya diğer içeriği dikey ve / veya yatay olarak ortalamak için öğeyi (iç içe) bir esnek kap yapın ve merkezleme kurallarını tekrarlayın.

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

Daha fazla ayrıntı burada: Bir esnek kutunun içindeki metni dikey olarak hizalamak nasıl?

Alternatif olarak, margin: autoesnek öğenin içerik öğesine başvurabilirsiniz .

p { margin: auto; }

Esnek autokenar boşlukları hakkında bilgi edinin : Esnek Öğeleri Hizalama Yöntemleri (bkz. Kutu # 56).

Birden çok esnek öğeyi merkezleme

Esnek bir konteynerin birden fazla çizgisi varsa (sarma nedeniyle) align-contentözellik, eksenler arası hizalama için gerekli olacaktır.

Spec'ten:

8.4. Flex Hatları Paketleme: align-content mülkiyet

align-contentEsnek kapsayıcı içindeki bir esnek kabın hatları hizalar mülkiyet zaman nasıl benzer çapraz eksende fazladan bir boşluk vardır justify-contentana ekseni içinde hizalar ürüne. Bu özelliğin tek satırlı bir esnek kap üzerinde hiçbir etkisi yoktur.

Daha fazla ayrıntı burada: Esnek sarma, hizalama-benlik, hizalama öğeleri ve hizalama içeriği ile nasıl çalışır?

Tarayıcı desteği

Flexbox, IE <10 hariç tüm büyük tarayıcılar tarafından desteklenir . Safari 8 ve IE10 gibi bazı yeni tarayıcı sürümleri satıcı önekleri gerektirir . Ön ek eklemenin hızlı bir yolu için Autoprefixer kullanın . Bu cevapta daha fazla ayrıntı .

Eski tarayıcılar için merkezleme çözümü

CSS tablosu ve konumlandırma özelliklerini kullanan alternatif bir merkezleme çözümü için şu cevaba bakın: https://stackoverflow.com/a/31977476/3597276

Ekle

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

ortalamak istediğiniz şeyin kap öğesine. Belgeler: yaslama içeriği ve hizalama öğeleri .

Önemli tarayıcılara özgü özellikleri kullanmayı unutmayın:

hizalama öğeleri: merkez; ->

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

haklı içerik: merkez; ->

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

Daha iyi anlaşılması için bu iki bağlantıyı okuyabilirsiniz: http://css-tricks.com/almanac/properties/j/justify-content/ ve http://ptb2.me/flexbox/

İyi şanslar.

1 - Üst div üzerindeki CSS'yi display: flex;

2 - Ana div üzerindeki CSS'yi, flex-direction: column;
bunun bu div içindeki tüm içeriğin yukarıdan aşağıya doğru yapacağını unutmayın. Üst div yalnızca alt öğeyi içeriyorsa ve başka bir şey içermiyorsa, bu en iyi sonucu verir.

3 - Üst div üzerindeki CSS'yi justify-content: center;

İşte CSS'nin nasıl görüneceğine bir örnek:

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

Şunlardan yararlanabilirsiniz:

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

ana bileşeninizde

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;onun konteyner ve margin:auto;onun öğe için mükemmel çalışır.

NOT: Efekti görmek için widthve öğelerini ayarlamanız gerekir height.

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

Bir metni bir bağlantıda ortalamanız gerekiyorsa bu işe yarayacaktır:

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: autoflexbox ile mükemmel çalışır. Dikey ve yatay olarak merkezileşir.

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>

SONUÇ:

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

nerede flex-containerdiv dikey ve yatay olarak merkeze sizin kullanılır rowsdiv ve rowsdiv grubuna "öğeleri" kullanılmış ve bir sütun tabanlı birinde bunları emrediyor.

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

CSS + kullanma

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

BURAYA bir göz at