web-dev-qa-db-fra.com

Faire un centre de la vue div - horizontalement et verticalement

J'ai un conteneur <div id="wrapper"> dans lequel tout le contenu du site sera présent. J'ai essayé de faire le centre div verticalement et horizontalement en utilisant la propriété css comme margin:0 auto; on #wrapper.

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
}

En utilisant ci-dessus css, je peux faire en sorte que la division se trouve en haut au centre de l'écran, mais comment la centrer (verticalement). quand je fais un zoom arrière dans firefox, ma div va effectuer un zoom arrière en haut au centre, mais ce que je veux, il devrait toujours être présent au centre de l'écran, à la fois verticalement et horizontalement.

Quelqu'un peut-il me suggérer comment puis-je obtenir la mise en page comme ça.

Merci d'avance.

htmlcsslayout
25
user1257587
#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

Démo: http://jsfiddle.net/fJtNQ/

Pourquoi ça marche? 

Eh bien, fondamentalement, vous avez un élément de positionnement absolu à l’intérieur du dom. Cela signifie que vous pouvez le positionner où vous voulez et si vous n'avez pas d'élément positionné comme parent, les valeurs left et top correspondront à la distance entre l'origine gauche et supérieure du document. 

L'affectation de left:50% et top:50% permet à cet élément de toujours être positionné au centre de l'écran, mais vous trouverez en son centre le coin supérieur gauche de l'élément. 

Si vous avez une largeur/hauteur fixe, vous pouvez facilement "traduire" le point situé au centre en faisant le centre de la division wrapper en donnant des valeurs négatives pour margin-left et margin-top (ainsi, à l'aide de calculs de base extrêmement simples, leurs valeurs seront -(width/2) et -(height/2))

MODIFIER

Vous pouvez aussi facilement centrer en utilisant flexbox, plus (un gros), vous n'avez pas besoin de spécifier w/h, c'est-à-dire: 

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

démo: https://jsfiddle.net/00utf52o/

41
stecb

La réponse de @ stecb fonctionne bien si vous travaillez avec une largeur/hauteur fixe.

Pour positionner une div ou une image verticalement au centre de toutes les fenêtres et la rendre sensible, utilisez ceci:

#elem-to-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Je viens de remplacer margin-left et margin-top par transform.

Si vous voulez une marge entourant l'élément, utilisez ceci:

#outer-elem {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fafafa;
    position: relative;
}
#elem-to-center {
    width: calc(100% - 60px);
    max-height: calc(100% - 60px);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JSFiddle | La source

J'ai trouvé cela utile même dans les vues réactives.

14
musafar006

Voici une solution pour ceux qui ont besoin de centrer une div enfant par rapport à viewport et non "par rapport à parent div". Les autres solutions mentionnées ici ne fonctionnent pas dans ce cas car elles ont tendance à rendre le centre de la division enfant par rapport à la division parent.

<div id="container">
  <div id="wrapper">Always center, No matter the parent div's position</div>
</div>

#wrapper {
 width:300px;
 height:300px;
 margin:0 auto;
 background:green;
 position:fixed;
 left:50%;
 top:50%;
 margin-left:-150px;
 margin-top:-150px;
}

#container {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  bottom: 0;
  left: 0;
}

démo ici http://jsbin.com/yeboleli/2/edit?css,output

13
rkrara

J'utilise jQuery

$(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();
4
Hupperware

Le moyen le plus simple et le plus simple de procéder consiste à définir la hauteur, la marge (et la largeur, si vous le souhaitez) à l'aide de la taille de la fenêtre d'affichage. 
Supposons que vous souhaitiez que la heightde votre conteneur occupe 60% (60vh) de l’écran, vous pouvez diviser le reste (40vh, puisque la hauteur totale de la fenêtre = 100vh) équitablement entre les marges supérieure et inférieure de sorte que L'élément s'aligne automatiquement au centre.
Régler le margin-left et le margin-right sur auto s'assurera que le conteneur est centré horizontalement. 

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }
<div class="container">
</div>

0
Rocks

Envisagez d'utiliser display: table associé à display: table-cell; vertical-align: middle sur un élément séparé. Parce que CSS n'a pas de signification sémantique, c'est une solution acceptable.

J'ai préparé un exemple pour vous: http://dabblet.com/Gist/2002681

Le seul inconvénient est que cela nécessite un peu plus de balisage que d'autres solutions, mais cela se contracte et se développe avec le contenu.

0
chicagoing