Comment centrer le contenu du corps en CSS

Comment centrer le contenu du corps en CSS : 1. Utilisez la marge pour définir la marge sur "0 auto" pour centrer horizontalement tous les éléments de la page HTML 2. Définissez la distance entre le div et la gauche et ; bordures supérieures de la fenêtre de la page Réglez sur « 50 % » ; 3. Réalisez un centrage horizontal et vertical via jQuery.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.

Recommandé : Tutoriel vidéo CSS

Lorsque nous concevons la page, nous devons souvent centrer le DIV et le centrer horizontalement et verticalement par rapport à la fenêtre de la page, par exemple comme Centrer la fenêtre de connexion. Notre solution traditionnelle consiste à utiliser du CSS pur pour centrer le DIV. Dans cet article, je vais vous expliquer comment centrer un DIV horizontalement et verticalement à l'aide de CSS et jQuery.

CSS centre le DIV horizontalement

Notez que le DIV mentionné dans cet article inclut tous les éléments de la page HTML.

Pour centrer un DIV horizontalement, vous pouvez le faire directement avec CSS. Tant que vous définissez la largeur du DIV, puis utilisez la marge pour définir la marge sur 0 automatiquement, CSS calculera automatiquement les marges gauche et droite pour centrer le DIV.

.mydiv{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

Mais si vous voulez que le DIV soit centré verticalement, j'ai bien peur que le CSS doive être modifié

CSS pour obtenir un centrage horizontal et vertical

Faites le centrage horizontal et vertical du DIV, vous devez connaître la largeur et la hauteur du DIV, puis définir la position en position absolue et définir la distance entre la bordure gauche et la bordure supérieure de la fenêtre de la page à 50 %. 50 % fait référence à 50 % de la largeur et de la hauteur de la fenêtre de la page. Enfin, déplacez le DIV vers la gauche et vers le haut, respectivement. La taille des déplacements vers la gauche et vers le haut est la moitié de la largeur et de la hauteur du DIV.

.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

Cette méthode est couramment utilisée, mais le principe est que la largeur et la hauteur du DIV doivent être définies. Si la largeur et la hauteur du DIV de la page sont dynamiques, par exemple, un calque DIV doit être affiché et affiché au centre, le contenu du DIV est dynamique, donc la largeur et la hauteur sont également dynamiques. jQuery peut être utilisé pour résoudre le problème de centrage.

jQuery réalise un centrage horizontal et vertical

Le principe de jQuery pour réaliser un centrage horizontal et vertical est de définir le CSS de DIV via jQuery et d'obtenir le décalage des marges gauche et supérieure de DIV. L'algorithme de décalage et de décalage de marge consiste à soustraire la largeur du DIV de la largeur de la fenêtre de la page, et la valeur résultante est divisée par 2, qui est le décalage à gauche. L'algorithme pour le décalage à droite est le même. . Notez que le paramètre CSS du DIV doit être complété dans la méthode resize(), c'est-à-dire qu'à chaque fois que la taille de la fenêtre est modifiée, le paramètre CSS du DIV doit être exécuté. Le code est le suivant :

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

<.> De plus, lorsque la page est chargée, il faut l'appeler resize().

$(function(){ 
    $(window).resize(); 
});

L'avantage de cette méthode est que vous n'avez pas besoin de connaître la largeur et la hauteur spécifiques du DIV. Vous pouvez directement utiliser jQuery pour réaliser un centrage horizontal et vertical, et elle est compatible avec différents navigateurs. Cette méthode est utilisée dans de nombreux effets de calque contextuel.

ps : Si la largeur du div est supérieure à la largeur de la page, alors vous devez ajouter un css

<style type="TEXT/CSS">
body{width:100%; overflow:hidden}
</style>

au corps

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!