Flexbox: tengah secara horizontal dan vertikal

Cara memusatkan div secara horizontal, dan vertikal di dalam wadah menggunakan flexbox. Dalam contoh di bawah ini, saya ingin setiap angka di bawah satu sama lain (dalam baris), yang dipusatkan secara horizontal.

.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

Saya pikir Anda menginginkan sesuatu seperti yang berikut ini.

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>

Lihat demo di: http://jsfiddle.net/audetwebdesign/tFscL/

.flex-itemElemen Anda harus tingkat blok ( divbukan span) jika Anda ingin ketinggian dan bantalan atas / bawah berfungsi dengan baik.

Juga, aktifkan .row, atur lebar menjadi autobukan 100%.

.flex-containerProperti Anda baik-baik saja.

Jika Anda ingin .rowberada di tengah secara vertikal di port tampilan, tetapkan tinggi 100% ke htmldan body, dan juga nol bodymargin.

Perhatikan bahwa .flex-containerperlu ketinggian untuk melihat efek penyelarasan vertikal, jika tidak, wadah menghitung ketinggian minimum yang diperlukan untuk melampirkan konten, yang kurang dari ketinggian port tampilan dalam contoh ini.

Catatan kaki:
The flex-flow, flex-direction, flex-wrapsifat bisa membuat desain ini lebih mudah untuk menerapkan. Saya pikir .rowwadah tidak diperlukan kecuali jika Anda ingin menambahkan beberapa styling di sekitar elemen (gambar latar belakang, perbatasan dan sebagainya).

Sumber daya yang bermanfaat adalah: http://demo.agektmr.com/flexbox/

Cara Memusatkan Elemen secara Vertikal dan Horizontal di Flexbox

Di bawah ini adalah dua solusi pemusatan umum.

Satu untuk item flex rata-rata ( flex-direction: column) dan yang lain untuk item flex rata-rata ( flex-direction: row).

Dalam kedua kasus, ketinggian div terpusat dapat bervariasi, tidak terdefinisi, tidak diketahui, apa pun. Ketinggian div terpusat tidak masalah.

Inilah HTML untuk keduanya:

<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 (tidak termasuk gaya dekoratif)

Ketika item fleksibel ditumpuk secara vertikal:

#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

Ketika item fleksibel ditumpuk secara horizontal:

Sesuaikan flex-directionaturan dari kode di atas.

#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

Memusatkan isi item fleksibel

Ruang lingkup konteks pemformatan fleksibel terbatas pada hubungan orangtua-anak. Keturunan dari wadah fleksibel di luar anak-anak tidak berpartisipasi dalam tata letak fleksibel dan akan mengabaikan sifat fleksibel. Pada dasarnya, sifat fleksibel tidak dapat diwariskan di luar anak-anak.

Oleh karena itu, Anda akan selalu perlu menerapkan display: flexatau display: inline-flexke elemen induk untuk menerapkan sifat fleksibel pada anak.

Untuk memusatkan teks secara vertikal dan / atau horizontal atau konten lain yang terkandung dalam item fleksibel, buat item tersebut sebagai wadah fleksibel (bersarang), dan ulangi aturan pemusatan.

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

Lebih detail di sini: Bagaimana cara menyelaraskan teks secara vertikal di dalam flexbox?

Atau, Anda dapat menerapkan margin: autoke elemen konten item fleksibel.

p { margin: auto; }

Pelajari tentang automargin fleksibel di sini: Metode untuk Menyelaraskan Item Flex (lihat kotak # 56).

Memusatkan beberapa baris item fleksibel

Ketika wadah fleksibel memiliki banyak garis (karena pembungkus) align-contentproperti akan diperlukan untuk penyelarasan sumbu-silang.

Dari spec:

8.4. Packing Flex Lines: align-content properti

The align-contentproperti disejajarkan garis wadah fleksibel dalam waktu wadah fleksibel ketika ada ruang ekstra dalam salib sumbu, mirip dengan bagaimana justify-contentdisejajarkan item individual dalam main-axis. Catatan, properti ini tidak berpengaruh pada wadah fleksibel satu baris.

Lebih detail di sini: Bagaimana cara flex-wrap bekerja dengan align-self, align-items, dan align-content?

Dukungan browser

Flexbox didukung oleh semua browser utama, kecuali IE <10 . Beberapa versi browser terbaru, seperti Safari 8 dan IE10, memerlukan awalan vendor . Untuk cara cepat menambahkan awalan, gunakan Autoprefixer . Lebih detail dalam jawaban ini .

Solusi pemusatan untuk browser yang lebih lama

Untuk solusi pemusatan alternatif menggunakan tabel CSS dan properti pemosisian, lihat jawaban ini: https://stackoverflow.com/a/31977476/3597276

Menambahkan

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

ke elemen wadah apa pun yang Anda ingin pusatkan. Dokumentasi: membenarkan konten dan menyelaraskan item .

Jangan lupa untuk menggunakan atribut spesifik browser yang penting:

menyelaraskan item: pusat; ->

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

Anda dapat membaca dua tautan ini untuk memahami dengan lebih baik: http://css-tricks.com/almanac/properties/j/justify-content/ dan http://ptb2.me/flexbox/

Semoga berhasil.

1 - Atur CSS pada div induk ke display: flex;

2 - Tetapkan CSS pada div induk ke flex-direction: column;
Perhatikan bahwa ini akan membuat semua konten dalam div itu naik dari atas ke bawah. Ini akan bekerja paling baik jika div induk hanya berisi anak dan tidak ada yang lain.

3 - Atur CSS pada div induk ke justify-content: center;

Berikut adalah contoh tampilan CSS:

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

Anda dapat memanfaatkan

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

pada komponen induk Anda

https://repl.it/repls/TomatoImaginaryInisialisasi

diplay: flex;untuk itu wadah dan margin:auto;untuk barang itu berfungsi sempurna.

CATATAN: Anda harus mengatur widthdan heightuntuk melihat efeknya.

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

Jika Anda perlu memusatkan teks pada tautan, ini akan melakukan trik:

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: autoberfungsi sempurna dengan flexbox. Ini terpusat secara vertikal dan 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>

HASIL:

KODE

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

di mana flex-containerdiv digunakan untuk memusatkan rowsdiv Anda secara vertikal dan horizontal , dan rowsdiv digunakan untuk mengelompokkan "item" Anda dan memesannya dalam kolom yang berbasis.

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

Menggunakan CSS +

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

lihat DI SINI