Centrer un DIV horizontalement et verticalement

Question

Existe-t-il un moyen de CENTRER un DIV verticalement et horizontalement mais, et c'est important, que le contenu ne sera pas coupé lorsque la fenêtre est plus petite que le contenu La division doit avoir une couleur de fond, une largeur et une hauteur.

J'ai toujours centré les divs avec le positionnement absolu et les marges négatives comme dans l'exemple fourni. Mais cela a le problème de couper le contenu en haut. Existe-t-il une méthode pour centrer la div .content 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 n'est pas un doublon de "Comment centrer un élément horizontalement et verticalement ? "1- Ma question a été posée avant. (il suffit de 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".

Answer 1

Para navigateurs modernes

Quand on a ce luxe. Il y a aussi le flexbox, mais il n'est pas largement pris en charge au moment où nous écrivons 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%);
}

Ajustez-le plus tard Codepen ou sur JSBin

Pour la prise en charge des navigateurs plus anciens, consultez une autre section de ce fil de discussion.

Answer 2

Après avoir essayé beaucoup de choses, j'ai trouvé une méthode qui fonctionne. Je la partage ici si elle peut être utile à quelqu'un. Vous pouvez le voir ici fonctionner : http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
}

Answer 3

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

Une méthode ( Exemple de 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>

Une autre méthode ( Exemple de 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>

Answer 4

Le moyen légitime de le faire, quelle que soit la taille de la division et quel que soit le navigateur utilisé, est le suivant :

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

Code Live

Answer 5

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 qu'ils recommandent consiste à ajouter un élément flottant vide avant le contenu que vous souhaitez centrer, puis à le supprimer. Elle n'a pas l'inconvénient que vous avez mentionné.

J'ai forqué votre JSBin pour 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;
}