Maison > Article > interface Web > Différentes façons de centrer une division en HTML et CSS
Suivez-moi sur LinkedIn
Suivez-moi sur Github.com
Cliquez et lisez
Sans Boaring Setion, nous pouvons rediriger vers le codage !
Flexbox est un outil de mise en page puissant qui facilite le centrage des éléments horizontalement et verticalement.
<!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>
CSS Grid est un autre système de mise en page puissant qui peut facilement centrer les éléments.
<!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>
Cette méthode consiste à positionner le div de manière absolue et à utiliser transform pour le centrer.
<!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>
Définition de la marge : auto sur un élément avec une largeur spécifiée peut le centrer horizontalement.
<!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>
Cette méthode utilise display: table et display: table-cell pour centrer un élément.
<!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>
Au revoir
Bon codage !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!