Pelbagai Cara Berkesan untuk Memusatkan Div dengan CSS

pengenalan

Terdapat beberapa cara untuk meletakkan elemen div di tengah menggunakan CSS. Berikut adalah beberapa kaedah biasa:

1. Menggunakan Flexbox

Flexbox ialah salah satu kaedah paling popular untuk memusatkan elemen secara mendatar dan menegak.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

2. Menggunakan Susun Atur Grid

Grid CSS juga menyediakan cara mudah untuk memusatkan elemen.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

3. Menggunakan Kedudukan Mutlak dan Transformasi

Kaedah ini menggunakan kedudukan: mutlak dan berubah untuk meletakkan elemen di tengah.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

4. Menggunakan Auto Margin

Kaedah ini digunakan untuk meletakkan elemen secara mendatar di tengah dengan jidar automatik. Walau bagaimanapun, untuk menegak, helah tambahan diperlukan.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`<div class="centered">Isi di sini</div>`}

5. Menggunakan Jajaran Teks dan Ketinggian Garis (Pemusatan Mendatar Sahaja)

Ini berfungsi dengan baik untuk teks atau elemen blok sebaris.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

6. Menggunakan Paparan Jadual

Ini adalah teknik lama tetapi masih berkesan.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

Kesimpulan

Untuk memusatkan elemen di tengah halaman secara mendatar dan menegak, kaedah Flexbox dan Grid adalah yang paling mudah dan paling moden. Walau bagaimanapun, kaedah lain mungkin masih berguna bergantung pada keperluan projek. Terima kasih kerana membaca artikel ini hingga habis

Atas ialah kandungan terperinci Pelbagai Cara Berkesan untuk Memusatkan Div dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!