Bagaimana untuk memusatkan div?

Cara Memusatkan Div dalam CSS

Memusatkan div ialah perkara yang paling mustahil

1. Memusatkan dengan Flexbox

Flexbox ialah cara moden untuk memusatkan kandungan secara menegak dan mendatar:

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

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

2. Memusatkan dengan Grid

Grid CSS juga boleh memusatkan kandungan:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

3. Memusatkan dengan Kedudukan Mutlak

Anda boleh memusatkan div menggunakan kedudukan mutlak:

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

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

4. Memusatkan dengan Auto Margin

Untuk pemusatan mendatar ringkas, gunakan margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}

<div class="centered-div">Centered Content</div>

5. Memusatkan dengan Auto Margin

Untuk elemen sebaris atau sebaris blok:

.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

Atas ialah kandungan terperinci Bagaimana untuk memusatkan div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!