web-dev-qa-db-fra.com

Centrer un DIV horizontalement et verticalement

Y a-t-il un moyen de CENTER A DIV verticalement et horizontalement mais, et c'est important, que le contenu ne être coupé lorsque la fenêtre est plus petite que le contenu La div doit avoir une couleur de fond, une largeur et une hauteur.

J'ai toujours centré les divisions sur le positionnement absolu et les marges négatives, comme dans l'exemple fourni. Mais le problème est que le contenu est coupé en premier. Existe-t-il une méthode pour centrer le contenu div sans ce problème?

J'ai l'exemple ici pour jouer: http://jsbin.com/iquviq/1/edit

CSS:

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div class="content"> some text </div>
</div>

Ma question ne fait pas double emploi avec "Comment centrer un élément horizontalement et verticalement?" 1- Ma question a déjà été posée. (juste vérifier les dates). 2- Ma question demande très clairement et en noir comme condition: "le contenu ne sera pas coupé lorsque la fenêtre est plus petite que le contenu"

htmlcsscenter
105
Nrc

Après avoir essayé beaucoup de choses, je trouve un moyen qui fonctionne. Je le partage ici s'il est utile à quiconque. Vous pouvez le voir fonctionner ici: http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }
140
Nrc

Pour les navigateurs modernes

Quand tu as ce luxe. Il y a flexbox aussi, mais ce n'est pas largement supporté au moment d'écrire ces lignes.

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Tinker avec elle plus loin sur Codepen ou sur JSBin

Pour les anciens navigateurs, cherchez ailleurs dans ce fil.

127
iamnotsam

Voici une démo: http://www.w3.org/Style/Examples/007/center-example

Une méthode ( exemple avec JSFiddle )

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML:

<div id="content">
    Content goes here
</div>

Autre méthode ( exemple avec JSFiddle )

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>
46
MultiformeIngegno

La manière légitime de le faire, quelle que soit la taille de la div, quelle que soit la taille du navigateur, est la suivante:

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

Code Live

5
suraj rawat

Je ne crois pas qu'il y ait moyen de faire cela strictement avec CSS. La raison en est votre qualificatif "important" à la question: forcer l'élément parent à se développer avec le contenu de son enfant.

Mon hypothèse est que vous devrez utiliser quelques bits de JavaScript pour trouver la taille de l'enfant et faire des ajustements.

Donc, avec ce code HTML:

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>

Ce CSS:

. parentElement {
 position: relative; 
 largeur: 960px; 
} 
. childElement {
 position: absolue; 
 haut: 50%; 
 à gauche: 50%; 
}

Ce jQuery pourrait être utile:

$('.childElement').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + 'px'});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

N'oubliez pas de charger correctement le jQ, soit dans le corps situé sous les éléments affectés, soit dans la tête à l'intérieur de $(document).ready(...).

1
oomlaut

Vous pouvez comparer différentes méthodes très bien expliquées sur cette page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

La méthode recommandée consiste à ajouter un élément flottant vide avant le contenu que vous ne pouvez pas centrer et à le supprimer. Il n'a pas l'inconvénient que vous avez mentionné.

J'ai incité votre JSBin à l'appliquer: http://jsbin.com/iquviq/7/edit

HTML

<div id="floater">
</div>

<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}

#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}
1
clement g

Vous voulez définir le style

margin: auto;

Et supprimez les styles de positionnement (haut, gauche, position)

Je sais que cela va centrer horrizontaly mais je ne suis pas sûr de la verticale!

0
Yann