Cara memusatkan elemen secara menegak dan mendatar dalam Flexbox

Di bawah ialah dua penyelesaian pemusatan biasa.

Item fleksibel untuk penjajaran menegak (flex-direction: column），另一种用于水平对齐的弹性项目（flex-direction: row).

Dalam kedua-dua kes, ketinggian div berpusat boleh berubah-ubah, tidak ditentukan, tidak diketahui, tidak penting.

Berikut ialah kod HTML untuk kedua-duanya:

<div id="container"><!-- flex容器 -->

    <div class="box" id="bluebox"><!-- flex项目 -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex项目 -->
        <p>DIV #2</p>
    </div>

</div>

CSS (tidak termasuk gaya hiasan)

Apabila item fleksibel disusun secara menegak:

#container {
    display: flex;           /* 建立flex容器 */
    flex-direction: column;  /* 将主轴设置为垂直方向 */
    justify-content: center; /* 在这种情况下，垂直居中项目 */
    align-items: center;     /* 在这种情况下，水平居中项目 */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* 将文本在<p>中居中，<p>不是flex项目 */
}

Demo

Apabila item fleksibel disusun secara mendatar:

Laraskan flex-direction peraturan dalam kod di atas.

#container {
    display: flex;
    flex-direction: row;     /* 将主轴设置为水平方向（默认设置） */
    justify-content: center; /* 在这种情况下，水平居中项目 */
    align-items: center;     /* 在这种情况下，垂直居中项目 */
    height: 300px;
}

Demo

Pusat kandungan item flex

Konteks pemformatan yang fleksibel terhad kepada hubungan ibu bapa-anak. Keturunan bekas lentur melebihi anak-anaknya tidak mengambil bahagian dalam susun atur lentur dan akan mengabaikan sifat lentur. Pada asasnya, sifat elastik tidak boleh diwarisi di luar kanak-kanak.

Jadi anda sentiasa perlu memohon display: flex或display: inline-flex pada elemen induk untuk menerapkan sifat flex pada elemen anak.

Untuk memusatkan teks atau kandungan lain secara menegak dan/atau mendatar, jadikan item sebagai bekas lentur (bersarang) dan ulangi peraturan pemusatan.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* 对于单行弹性容器 */
    align-content: center;      /* 对于多行弹性容器 */
}

Untuk butiran lanjut lihat: Bagaimana untuk menjajarkan teks secara menegak dalam flexbox?

Sebagai alternatif, anda boleh menggunakan margin: auto pada elemen kandungan item fleksibel.

p { margin: auto; }

Ketahui lebih lanjut tentang margin flex auto di sini: Cara Menjajarkan Item Flex (lihat kotak #56).

Item fleksibel berbilang baris berpusat

Apabila bekas flex mempunyai berbilang baris (kerana pembalut garisan), align-contentsifat akan menjadi penting untuk penjajaran paksi silang.

Dari spec:

Untuk butiran lanjut lihat: Bagaimanakah flex-wrap berfungsi dengan align-self, align-item dan align-content?

Sokongan pelayar

Flexbox disokong dalam semua pelayar utama, kecuali IE < Beberapa versi penyemak imbas terbaharu, seperti Safari 8 dan IE10, memerlukan awalan vendor. Untuk menambah awalan dengan cepat, anda boleh menggunakan Autoprefixer. Lihat jawapan ini untuk butiran lanjut.

Memusatkan penyelesaian untuk pelayar lama

Untuk penyelesaian pemusatan alternatif menggunakan jadual CSS dan sifat kedudukan, lihat jawapan ini: https://stackoverflow.com/a/31977476/3597276

Saya rasa apa yang anda mahukan ialah perkara berikut.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    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>