wake-up-neo.net

Zentrieren Sie ein div horizontal und vertikal und bleiben Sie zentriert, wenn Sie die Größe des übergeordneten Elements ändern

Ich möchte jederzeit ein Div horizontal und vertikal zentrieren.

Ich kann die Breite des Fensters verkleinern/vergrößern, und das div reagiert, indem es immer in der Mitte des Fensters bleibt

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

Hier ist ein JSFiddle-Beispiel von dem, was ich momentan habe ..__ Aber ich möchte, dass das div auch vertikal zentriert bleibt. Wenn ich also die Höhe des Fensters verkleinere/vergrößere, antwortet das div, indem es in der Mitte bleibt des Fensters. 

In Bezug auf das Beispiel möchte ich, dass die Blackbox auf Fenstergröße vertikal zentriert bleibt, und zwar auf dieselbe Weise, wie sie immer horizontal in der Mitte bleibt.

htmlcsshtml5css3
15
Aaron

Sie können dies mit CSS-Tabellen tun:

JsFiddle

Markup

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

(Relevantes) CSS

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

Normalerweise führt margin: 0 auto; die horizontale Ausrichtung und vertical-align: middle für die vertikale Ausrichtung aus. Ich habe es versucht, aber nicht funktioniert. 

Versuchen Sie es mit der untenstehenden css

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

Check es in JSFiddle .

Um mehr über den Trick zu erfahren, klicken Sie auf Dead Center ein Element .

0
Praveen

Testen Sie das 

.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;
}

hier haben Sie ein Beispiel: http://jsbin.com/iquviq/30/edit

0
Michael Unterthurner

Überprüfen Sie dies 

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

versuche dies

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

versuche dies

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

Demo-Link ist hier

.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