web-dev-qa-db-fra.com

Centrer une div horizontalement et verticalement et rester centré lors du redimensionnement du parent

Je veux centrer une div horizontalement et verticalement à tout moment.

Je peux réduire/augmenter la largeur de la fenêtre et le div répondra en restant toujours au centre de la fenêtre

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

Voici un exemple JSFiddle de ce que j'ai actuellement . Mais je veux que la div reste centrée verticalement aussi, donc si je réduis/augmente la hauteur de la fenêtre, la div répondra en restant au milieu de la fenêtre. 

En ce qui concerne l'exemple, je souhaite que la boîte noire soit centrée verticalement sur le redimensionnement de la fenêtre de la même manière qu'elle reste toujours horizontalement au centre.

htmlcsshtml5css3
15
Aaron

Vous pouvez le faire avec les tables CSS:

JsFiddle

Markup

<div class="container">
    <div class="cent"></div>
</div>

CSS (pertinent)

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}
31
Danield
.cent
{
  height:50px;
  width:50px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: 0 auto;
}
0
Ritabrata Gautam

Généralement, margin: 0 auto; effectue l'alignement horizontal et vertical-align: middle pour l'alignement vertical. J'ai essayé mais je ne travaillais pas. 

Essayez ce qui suit css

.cent {
    height: 50px;
    width: 50px;
    background: #222;
    position: absolute;
    margin: -50px 0 0 -50px;
    left: 50%;
    top: 50%;
}

Vérifiez-le dans JSFiddle .

Pour en savoir plus sur le tour de contrôle Dead Center an Element .

0
Praveen

Testez ceci 

.cent {
    width: 50px;
    height: 50px;
    background-color: black;

    position:absolute;
    left:0; 
    right:0;
    top:0; 
    bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}

voici un exemple: http://jsbin.com/iquviq/30/edit

0
Michael Unterthurner

Vérifie ça 

 .cent
   {
      height:50px;
      width:50px;
      background-color:black;
      margin:auto;
      margin-top:50%;
   }
0
ubaid ashraf

essaye ça

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
0
Omar Shbaro

essaye ça

http://jsfiddle.net/tVuS6/4/

      .cent
    {
    height:50px;
    width:50px;
    background-color:black;
    margin-left: -150px;
    margin-top: -150px;
   margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    }
0
Falguni Panchal

Le lien de démonstration est ici

.cent
{
    height:50px;
    width:50px;
    background-color:black;
    margin:auto;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
}
0
Swarnamayee Mallia