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?
Es gibt tatsächlich eine Lösung, mit css3, die ein div von unbekannter Höhe vertikal zentrieren kann. Der Trick besteht darin, das div um 50 % nach unten zu verschieben und dann mit transformY um sie wieder in die Mitte zu bringen. Die einzige Voraussetzung ist, dass das zu zentrierende Element ein übergeordnetes Element hat. Beispiel:
<div class="parent">
<div class="center-me">
Text, images, whatever suits you.
</div>
</div>
.parent {
/* height can be whatever you want, also auto if you want a child
div to be responsible for the sizing */
height: 200px;
}
.center-me {
position: relative;
top: 50%;
transform: translateY(-50%);
/* prefixes needed for cross-browser support */
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}Unterstützt von allen gängigen Browsern und dem IE 9 und höher (der IE 8 wird nicht unterstützt, da er zusammen mit Windows XP im Herbst dieses Jahres eingestellt wurde). Gott sei Dank).
Eine weitere (kugelsichere) Methode stammt aus ici Verwendung der Regel "display:table":
Markup
<div class="container">
<div class="outer">
<div class="inner">
<div class="centered">
...
</div>
</div>
</div>
</div>CSS:
.outer {
display: table;
width: 100%;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered {
position: relative;
display: inline-block;
width: 50%;
padding: 1em;
background: orange;
color: white;
}
Ich habe mir die View-Datei von Laravel angesehen und festgestellt, dass der Text perfekt in der Mitte zentriert ist. Ich erinnerte mich sofort an diese Frage. So haben sie es gemacht:
<html>
<head>
<title>Laravel</title>
<!--<link href='http://stackoverflow.com//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->
<style>
.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.inside {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="inside">This text is centered</div>
</div>
</body>Das Ergebnis sieht so aus:
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.