Frage Wie man absolut positioniertes Element in div zentriert?


Ich muss einen platzieren div (mit position:absolute;) Element in der Mitte meines Fensters. Aber ich habe Probleme, weil die Breite ist unbekannt.

Ich habe es versucht. Aber es muss angepasst werden, da die Breite reagiert.

.center {
  left: 50%;
  bottom:5px;
}

Irgendwelche Ideen?


867
2017-11-21 21:56


Ursprung


Antworten:


<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>


1164
2017-11-22 00:21



Das funktioniert für mich:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


1633
2017-11-25 20:07



Reaktionsschnelle Lösung

Hier ist eine gute Lösung für responsives Design oder unbekannte Dimensionen Im Algemeinen wenn Sie IE8 nicht unterstützen und weniger benötigen.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Hier ist eine JS Fiddle

Der Schlüssel ist, dass left: 50% ist relativ zu den Eltern während der translate transform ist relativ zu den Elementen width / height.

Auf diese Weise haben Sie ein perfekt zentriertes Element mit einer flexiblen Breite für Kind und Eltern. Bonus: Das funktioniert auch, wenn das Kind größer ist als das Elternteil.

Sie können es auch vertikal damit zentrieren (und wiederum können Breite und Höhe von Eltern und Kind völlig flexibel (und / oder unbekannt) sein):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Beachten Sie, dass Sie möglicherweise benötigen transform Hersteller ist ebenfalls vorangestellt. Beispielsweise -webkit-transform: translate(-50%,-50%);


552
2018-04-30 09:54



Wirklich nette Post .. wollte nur hinzufügen wenn jemand es mit single div tag machen will dann hier den weg raus:

Nehmen width wie 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

In diesem Fall sollte man das wissen width vorher.


45
2017-08-31 09:56



Absolutes Zentrum 

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS: 

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Getestet in Google Chrome, Firefox und IE8

Hoffe das hilft :)


30
2018-01-30 02:29



diese Arbeit für vertikal und horizontal

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

Wenn Sie Element-Element des übergeordneten Elements festlegen möchten, legen Sie die Position des übergeordneten Elements relativ fest

 #parentElement{
      position:relative
  }

bearbeiten:

  • Für vertikales Zentrum richten Sie die Höhe auf Ihr Element aus. Danke an @Raul

  • Wenn Sie element centre von eltern machen wollen, setzen Sie die Position des Elternteils auf relativ


28
2017-12-07 09:26



Auf der Suche nach einer Lösung habe ich oben die Antworten erhalten und könnte Inhalte mit zentrieren Matthias Weiler antwortet aber mit text-align.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Arbeitete mit Chrome und Firefox.


17
2018-05-29 01:36