Ich muss eine div (mit position:absolute; ) Element in der Mitte meines Fensters. Aber ich habe Probleme dabei, weil das Breite ist unbekannt .
Ich habe das ausprobiert. Aber es muss angepasst werden, da die Breite reaktionsfähig ist.
.center {
left: 50%;
bottom: 5px;
}Wie kann ich das tun?
Hier ist eine gute Lösung für responsives Design oder unbekannte Abmessungen im Allgemeinen wenn Sie den IE8 und niedrigere Versionen nicht unterstützen müssen.
.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>Der Anhaltspunkt ist, dass left: 50% ist relativ zum Elternteil, während die translate transform ist relativ zu den Elementen Breite/Höhe.
Auf diese Weise erhalten Sie ein perfekt zentriertes Element mit einer flexiblen Breite sowohl für das untergeordnete als auch für das übergeordnete Element. Bonus: Dies funktioniert auch, wenn das untergeordnete Element größer ist als das übergeordnete.
Sie können es damit auch vertikal zentrieren (und auch hier können Breite und Höhe von Elternteil und Kind völlig flexibel (und/oder unbekannt) sein):
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}Denken Sie daran, dass Sie möglicherweise Folgendes benötigen transform ebenfalls mit dem Präfix "Lieferant". Zum Beispiel -webkit-transform: translate(-50%,-50%);
Angenommen, das Element im div ist ein anderes div...
Diese Lösung funktioniert gut:
<div class="container">
<div class="center"></div>
</div>En Container kann eine beliebige Größe haben (muss positionsbezogen sein):
.container {
position: relative; /* Important */
width: 200px; /* Any width */
height: 200px; /* Any height */
background: red;
}Das Element ( div ) kann auch eine beliebige Größe haben (muss kleiner als der Container ):
.center {
position: absolute; /* Important */
top: 50%; /* Position Y halfway in */
left: 50%; /* Position X halfway in */
transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
width: 100px; /* Any width */
height: 100px; /* Any height */
background: blue;
}Das Ergebnis sieht dann so aus. Führen Sie das Codeschnipsel aus:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: blue;
}
<div class="container">
<div class="center"></div>
</div>Ich fand es sehr hilfreich.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
4 Stimmen
Sie haben ein Beispiel in Beispiele für den absoluten Mittelpunkt die in verschiedenen Situationen verallgemeinert werden können.
2 Stimmen
Eine bessere Antwort auf diese Frage finden Sie unter stackoverflow.com/questions/17976995/
0 Stimmen
Ich glaube, einige von uns Oldies müssen sich mit Flex