Ikuti saya di LinkedIn
Ikuti saya di Github.com
Klik & Baca
Tanpa Boaring Setion kami boleh redirect ke pengekodan!
Flexbox ialah alat susun atur berkuasa yang memudahkan untuk memusatkan elemen secara mendatar dan menegak.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center Div with Flexbox</title> <style> .container { display: flex; justify-content: center; /* Horizontal center */ align-items: center; /* Vertical center */ height: 100vh; /* Full viewport height */ } .centered-div { width: 200px; height: 200px; background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="centered-div">Centered with Flexbox</div> </div> </body> </html>
Grid CSS ialah satu lagi sistem susun atur berkuasa yang boleh memusatkan elemen dengan mudah.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center Div with Grid</title> <style> .container { display: grid; place-items: center; /* Center both horizontally and vertically */ height: 100vh; /* Full viewport height */ } .centered-div { width: 200px; height: 200px; background-color: lightcoral; } </style> </head> <body> <div class="container"> <div class="centered-div">Centered with Grid</div> </div> </body> </html>
Kaedah ini melibatkan meletakkan div secara mutlak dan menggunakan transformasi untuk memusatkannya.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center Div with Absolute Positioning</title> <style> .container { position: relative; height: 100vh; /* Full viewport height */ } .centered-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: lightgreen; } </style> </head> <body> <div class="container"> <div class="centered-div">Centered with Absolute Positioning</div> </div> </body> </html>
Menetapkan jidar: auto pada elemen dengan lebar yang ditentukan boleh memusatkannya secara mendatar.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center Div with Margin Auto</title> <style> .container { width: 100%; height: 100vh; /* Full viewport height */ display: flex; align-items: center; /* Vertical center */ } .centered-div { margin: 0 auto; /* Horizontal center */ width: 200px; height: 200px; background-color: lightcoral; } </style> </head> <body> <div class="container"> <div class="centered-div">Centered with Margin Auto</div> </div> </body> </html>
Kaedah ini menggunakan paparan: jadual dan paparan: sel jadual untuk memusatkan elemen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center Div with Table Display</title> <style> .container { display: table; width: 100%; height: 100vh; /* Full viewport height */ } .centered-div { display: table-cell; vertical-align: middle; /* Vertical center */ text-align: center; /* Horizontal center */ } .inner-div { display: inline-block; width: 200px; height: 200px; background-color: lightpink; } </style> </head> <body> <div class="container"> <div class="centered-div"> <div class="inner-div">Centered with Table Display</div> </div> </div> </body> </html>
Byyy
Selamat Mengekod!
Atas ialah kandungan terperinci Cara Berbeza untuk Memusatkan Div dalam HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!