Comment centrer la boîte div au centre de l'écran en HTML

Comment centrer une boîte DIV au centre de l'écran : Utilisez la propriété CSS text-align: center; margin: auto;. Utilisez l'affichage de flexbox : flex ; Utiliser la position de positionnement absolue : absolue ; gauche : 50 % ; transformer : traduire (-50 %, -50 %);.

Comment centrer la boîte DIV au centre de l'écran

Méthode 1 : Utilisez la propriété CSS

• text-align: center; pour centrer l'élément conteneur.
• margin: auto; Définit des marges automatiques sur un élément conteneur, qui centreront l'élément dans le conteneur.

Code HTML :

<code class="html"><div style="text-align: center; margin: auto;">
  您的内容在此
</div></code>

Méthode 2 : Utilisez flexbox

• display: flex; pour convertir l'élément conteneur en flexbox.
• justify-content: center; Centrez l'élément sur l'axe principal (horizontalement).
• align-items: center; Centrez l'élément sur l'axe transversal (direction verticale).

Code HTML :

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  您的内容在此
</div></code>

Méthode 3 : Utiliser le positionnement absolu

• position: absolue; pour supprimer l'élément du flux normal du document.
• gauche : 50 % ; Déplace l'élément depuis la gauche de la moitié de sa largeur.
• transform: translation(-50%, -50%); Déplace l'élément vers la gauche et vers le haut à partir du point central de la moitié de sa largeur et de sa hauteur.

Code HTML :

<code class="html"><div style="position: absolute; left: 50%; transform: translate(-50%, -50%);">
  您的内容在此
</div></code>

Notes supplémentaires :

• Dans certains cas, vous devrez peut-être ajuster les marges ou d'autres valeurs de style pour assurer un centrage correct.
• Assurez-vous que l'élément conteneur est suffisamment grand pour contenir votre contenu.
• Ces méthodes fonctionnent dans tous les navigateurs modernes.

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!