Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk memusatkan div?

Bagaimana untuk memusatkan div?

WBOY
WBOYasal
2024-07-17 13:52:07592semak imbas

How to center a 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn