Bagaimanakah Saya Boleh Memusatkan Div Secara Menegak Di Dalam Div Lain?

Memusatkan Div Secara Menegak Di Dalam Div Lain

Apabila ingin memusatkan div dalam div lain, pendekatan pertama anda mungkin menggunakan nilai margin atas dan margin kiri , seperti yang dilihat dalam contoh CSS di bawah:

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

Walau bagaimanapun, kaedah ini memerlukan pelarasan pada bila-bila masa saiz perubahan div dalaman. Untuk penyelesaian yang lebih generik, kita boleh meneroka pilihan berikut:

Juruskan Menegak Tengah

Menggunakan jajaran menegak: tengah menjajarkan div secara menegak dalam bekas induknya. Untuk menggunakan teknik ini:

1. Tetapkan bekas induk untuk dipaparkan: sel jadual dan sejajarkannya secara menegak dengan jajar menegak: tengah.
2. Tetapkan div dalam untuk dipaparkan: sebaris- blok.

Moden Penyelesaian:

1. Transform

Transformasi menawarkan pendekatan yang lebih mudah:

1. Letakkan div dalam pada kedudukan mutlak dengan atas: 50% dan kiri: 50%.
2. Gunakan transform: terjemah(-50%,-50%) untuk memusatkan div dalam kedua-duanya dimensi.

2. Flexbox

Flexbox, dengan fleksibilitinya, menyediakan penyelesaian yang paling mudah:

1. Tetapkan bekas induk untuk dipaparkan: flex.
2. Gunakan justify-content : tengah dan selaras-item: tengah ke tengah div dalam kedua-dua secara mendatar dan secara menegak.

Kaedah khusus yang anda pilih akan bergantung pada keperluan dan pilihan keserasian anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Div Secara Menegak Di Dalam Div Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!