javascript - css mengawal div untuk sentiasa dipusatkan secara mendatar dan menegak, dan saiz div ini berbeza

Question

Kawalan css menambah div dengan nama kelas bersatu Saya mahu ia dipaparkan secara mendatar dan menegak di tengah Walau bagaimanapun, saiz div adalah berbeza, jadi css tidak boleh diperbaiki.

迷茫 · Answer

lentur susun atur

过去多啦不再A梦 · Answer

Salah satunya ialah menggunakan susun atur fleksibel untuk memusatkan elemen kanak-kanak secara mendatar dan menegak;
.flex {
paparan: flex;
align-item: center;
justify-content: center;
}

.satu {
kedudukan: mutlak;
kiri: 50%;
atas: 50%;
transformasi: terjemah(-50%, -50%);
}

Portal

扔个三星炸死你 · Answer

Pemusatan menegak:
kaedah susun atur jadual, kaedah blok sebaris
kaedah kedudukan mutlak
pemusatan viewport
penyelesaian berasaskan flexbox

过去多啦不再A梦 · Answer

Soalan biasa, seseorang di luar negara telah menyelesaikan pemusatan menegak dalam pelbagai situasi: https://css-tricks.com/center...

Kami juga menjana kod terus untuk anda dan mempertimbangkan sama ada ia serasi dengan IE: http://howtocenterincss.com/

Anda juga boleh menyemak versi terjemahan: https://github.com/chenjsh36/...

Selepas membaca ini, saya tidak perlu risau lagi tentang pelbagai masalah vertical centering 23333

黄舟 · Answer

Tambahkan display:flex,align-item:center pada elemen induk

巴扎黑 · Answer

Anda boleh menggunakan susun atur elastik di atas, tetapi ia tidak menyokong pelayar peringkat rendah
Anda boleh menggunakan kedudukan mutlak untuk memusatkan p secara menegak dan mendatar

p{
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;  
    width: 620px;
    height: 618px;
    margin: auto;  
    padding: 30px 0;
    box-sizing: border-box;
}

三叔 · Answer

susun atur fleksibel juga disyorkan

PHP中文网 · Answer

Pelbagai lapisan anjal? Pelbagai pengiraan? Memusatkan kiri dan kanan adalah mudah, hanya

margin:0 auto;
baik, tetapi naik dan turun sedikit lebih menyusahkan. Walaupun ia menyusahkan dalam banyak cara

1 Berdasarkan js, ini agak menyusahkan, jadi saya tidak akan menjelaskannya secara terperinci

2, disable:table Ini memerlukan kerjasama dua DOM. Keserasian utama juga adalah sederhana

3 Gunakan transfrom Jika anda tidak mempertimbangkan keserasian dan tidak mengetahui ketinggian, ia amat disyorkan. Kaedah anggaran adalah seperti berikut:

.dom{

Tentukan sendiri lebar

kedudukan: mutlak;
ubah: terjemah(-50%, -50%);
kiri: 50%;
atas: 50%;
}
Saya tahu lebarnya, tetapi saya tidak tahu betapa tingginya saya mengesyorkan ini

4 Jika anda tahu lebar dan tinggi, anda tidak memerlukan yang di atas, kerana yang ini serasi gila

.dom{

Tentukan sendiri lebar dan tinggi

kedudukan: mutlak;

jidar: auto;
atas:0;
kanan: 0;
bawah:0;
kiri: 0;
}
5, reka letak lentur, sebagai tambahan kepada keserasian, Semua yang lain baik-baik saja.


    这是文字信息

.topeng{

position: fixed;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;

}
.mask-con{

width: 200px;
/*height: 90px;*/
height: auto;
background: #fff;
font-size: 14px;
padding: 20px;
border-radius:10px;

}
6 Jika anda mempertimbangkan keserasian ====> sila semak item pertama. [Berapa umur itu? Masih mempertimbangkan IE789, sokongan IE7 DOM1 utama tidak begitu baik, jadi. . . 】

7, tiada yang lain. Yang di atas sudah pasti cukup. Jika ada yang bagus, sila tambahkan

滿天的星座 · Answer

Unsur induk

{
 position: relative;
}

Unsur kanak-kanak

{
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}

習慣沉默 · Answer

Tambah tiga lagi kaedah.

Pusat elemen dengan lebar dan ketinggian yang diketahui menggunakan kedudukan mutlak atau tetap:

.horizontal-and-vertical-center {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Mengguna pakai display: table elemen berpusat reka letak, menyokong lebar dan ketinggian yang tidak tentu, dan serasi dengan IE8+ dan pelayar moden yang lain:

.table {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
 
.cell {
    display: table-cell;
    vertical-align: center;
}
 
.horizontal-and-vertical-center {
    width: 800px;
    margin: 0 auto;
    /* 如果不定宽度的话用 inline-block 并且外层 text-align: center */
}

:before Pseudo-element mengembangkan ketinggian garisan (kaedah yang digunakan oleh AmazeUI dalam komponen modal, dan menyokong lebar dan ketinggian yang tidak pasti, IE8+):

.am-modal {
    /* ... */
    text-align: center;
    /* ... */
}

.am-modal:before {
    content: "0B";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.am-modal-dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    /* ... */
}