web-dev-qa-db-fra.com

alignement vertical et horizontal (milieu et centre) avec css

Je pratique le CSS et je suis tellement confus comment puis-je forcer mon élément div à être centré (verticalement et horizontalement) sur ma page (quel sens ou quels moyens de compatibilité entre navigateurs)?

Meilleures salutations !

cssxhtmlalignment
28
SilverLight

Il existe de nombreuses méthodes:

  1. Centrer l'alignement horizontal et vertical d'un élément avec une mesure fixe

[~ # ~] css [~ # ~] 

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>

2. Centrer horizontalement et verticalement une seule ligne de texte

[~ # ~] css [~ # ~] 

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>

3. Centrer l'alignement horizontal et vertical d'un élément sans mesure spécifique

[~ # ~] css [~ # ~] 

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>

Plus ici: alignement horizontal et vertical en CSS

69
sgokhales

Ce billet de blog décrit deux méthodes de centrage horizontal et vertical d'un div. On utilise uniquement du CSS et fonctionnera avec des divs qui ont une taille fixe; l'autre utilise jQuery et fonctionnera des divs dont vous ne connaissez pas la taille à l'avance.

J'ai dupliqué les exemples CSS et jQuery de la démo du billet de blog ici:

[~ # ~] css [~ # ~]

En supposant que vous ayez un div avec une classe de .classname, le css ci-dessous devrait fonctionner.

Le left:50%; top:50%; place le coin supérieur gauche de la div au centre de l'écran; le margin:-75px 0 0 -135px; la déplace vers la gauche et vers le haut de la moitié respectivement de la largeur et de la hauteur de la division de taille fixe.

.className{
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;
}

jQuery 

$(document).ready(function(){
    $(window).resize(function(){
        $('.className').css({
            position:'absolute',
            left: ($(window).width() - $('.className').outerWidth())/2,
            top: ($(window).height() - $('.className').outerHeight())/2
        });
    });
    // To initially run the function:
    $(window).resize();
});

Voici une démonstration des techniques en pratique .

4
Greg

Ce site donne quelques options pour centrer verticalement votre div: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

2
JWC

Ce n'est pas aussi facile à faire qu'on pourrait s'y attendre - vous ne pouvez vraiment faire l'alignement vertical que si vous connaissez la hauteur de votre conteneur. SI c'est le cas, vous pouvez le faire avec un positionnement absolu.

Le concept consiste à définir les positions haut/gauche à 50%, puis à utiliser des marges négatives (définies à la moitié de la hauteur/largeur) pour ramener le conteneur au centre.

Exemple: http://jsbin.com/ipawe/edit

CSS de base:

#mydiv { 
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 700px;
    margin-top: -200px; /* -(1/2 height) */
    margin-left: -350px; /* -(1/2 width) */
  }
1
RussellUresti

Il y a une meilleure solution maintenant: Alignez verticalement n'importe quoi avec seulement 3 lignes de CSS

1
nokiko