Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan div?
Memusatkan div ialah perkara yang paling mustahil
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>
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>
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>
Untuk pemusatan mendatar ringkas, gunakan margin: auto:
.centered-div { width: 50%; margin: 0 auto; }
<div class="centered-div">Centered Content</div>
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!