Beste Methode zur Zentrierung einer <div> Element auf einer Seite sowohl vertikal als auch horizontal?
Ich weiß, dass margin-left: auto; margin-right: auto; wird auf der Horizontalen zentriert, aber wie kann man das am besten auch vertikal machen?
Eine alternative Antwort würde lauten こん .
<div id="container">
<div id="centered"> </div>
</div>und das css:
#container {
height: 400px;
width: 400px;
background-color: lightblue;
text-align: center;
}
#container:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
}
#centered {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
Ich bin überrascht, dass dies noch nicht erwähnt wurde, aber der einfachste Weg, dies zu tun, wäre durch die Einstellung der Höhe, Rand (und Breite, wenn Sie wollen) mit Viewport Größen.
Wie Sie vielleicht wissen, ist die Gesamthöhe des Ansichtsfensters = 100vh.
Sagen wir, Sie wollen die height Ihres Containers 60 % (60vh) des Bildschirms einnimmt, können Sie den Rest (40vh) gleichmäßig auf den oberen und unteren Rand aufteilen, so dass sich das Element automatisch in der Mitte ausrichtet.
Einstellung der margin-left y margin-right zu auto stellt sicher, dass der Container horizontal zentriert ist.
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}
<div class="container">
</div>
Falls Sie eine bestimmte Größe für Ihre div könnten Sie verwenden calc .
Live-Beispiel: https://jsfiddle.net/o8416eq3/
Anmerkungen: Dies funktioniert nur, wenn Sie die Breite und Höhe Ihres ``div`` im CSS fest kodiert haben.
#target {
position:fixed;
top: calc(50vh - 100px/2);
left: calc(50vw - 200px/2);
width:200px;
height:100px;
background-color:red;
}
<div id='target'></div>
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<body>
<div>Div to be aligned vertically</div>
</body>Position: absolut div im Hauptteil des Dokuments
Ein Element mit Position: absolut; wird relativ zum nächstgelegenen positionierten Vorgänger positioniert (anstelle von relativ positioniert auf das Ansichtsfenster (body tag), wie fixiert).
Wenn ein absolut positioniertes Element jedoch keine positionierten Vorgänger hat, verwendet es den Dokumentenkörper und bewegt sich mit dem Bildlauf der Seite mit.
Quelle: CSS-Position
Verwendung von display:grid zu Eltern und Umfeld margin:auto auf das mittlere Element wird der Trick tun:
Siehe untenstehenden Ausschnitt:
html,body {
width :100%;
height:100%;
margin:0;
padding:0;
}
.container {
display:grid;
height:90%;
background-color:blue;
}
.content {
margin:auto;
color:white;
}
<div class="container">
<div class="content"> cented div here</div>
</div> 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.
3 Stimmen
Hier ist eine einfache, saubere und stabile Möglichkeit, Divs in einem Container nur mit CSS zu zentrieren. stackoverflow.com/a/31977476/3597276
2 Stimmen
Diese Frage ist als Duplikat einer Frage gekennzeichnet, die 5 Jahre später gestellt wurde. Oh StackOverflow.