Faire un centre div de la fenêtre-horizontalement et verticalement
J'ai un conteneur <div id="wrapper"> dans lequel tout le contenu de mon 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 le css ci-dessus, je peux faire la div en (centre supérieur) de l'écran mais comment le centrer(verticalement). lorsque je fais un zoom arrière dans firefox, mon div va effectuer un zoom arrière dans le centre supérieur, mais ce que je veux, il devrait être toujours présent au centre de l'écran à la fois verticalement et horizontalement.
Peut tout on me suggère comment puis-je obtenir la mise en page comme ça.
Merci d'avance.
6 réponses
#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 positionné 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é par rapport en tant que parent, left et top seront la distance par rapport à l'origine gauche/supérieure du document.
L'affectation de left:50% et top:50% permet de positionner cet élément toujours au centre de l'écran, mais dans centre, vous trouverez le coin supérieur gauche de l'élément.
Si vous avez une largeur/hauteur fixe, vous pouvez facilement "traduire" le point au centre pour être en fait le centre de la div wrapper en donnant négatif margin-left et margin-top (donc avec l'aide de quelques mathématiques de base extrêmement faciles leurs valeurs seront -(width/2) et -(height/2))
Modifier
Vous pouvez également 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 */
}
Voici une solution pour ceux qui ont besoin de centrer une div enfant par rapport à la fenêtre d'affichage et non "relative à la div parent". D'autres solutions mentionnées ici ne fonctionnent pas dans ce cas car elles ont tendance à rendre le centre div enfant par rapport au div 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;
}
La réponse de @ stecb fonctionne bien si vous travaillez avec une largeur/hauteur fixe.
Pour positionner un div ou une image verticalement au centre de toutes les fenêtres et la rendre réactive, utilisez ceci:
#elem-to-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Je viens de remplacer margin-left et margin-top avec transformer.
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%);
}
J'ai trouvé cela utile même dans les vues réactives.
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();
Envisagez d'utiliser display: table couplé avec 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 travaillé 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 il se contracte et se développe avec le contenu.
La façon la plus simple et la plus propre de le faire serait de définir la hauteur, la marge (et la largeur, si vous le souhaitez) en utilisant des tailles de fenêtre.
Disons que vous voulez que le height de votre conteneur occupe 60% (60vh) de l'écran, vous pouvez diviser le reste (40vh, puisque la hauteur totale de la fenêtre = 100vh) également entre la marge supérieure et la marge inférieure de sorte que l'élément s'aligne automatiquement au centre.
Définir les margin-left et margin-right sur auto, permet de s'assurer que le conteneur est centré horizontalement.
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}<div class="container">
</div>