Wie ein div in Mitte des Browsers sowohl vertikal als auch horizontal mit CSS nur?Wie stelle ich ein div mit CSS in die Mitte des Browsers?
Stellen Sie sicher, dass es auch auf IE7 funktioniert.
Wenn alles fehlschlägt, verwenden wir vielleicht JavaScript, aber eine letzte Wahl.
HTML:
<div id="something">... content ...</div>
CSS:
#something {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
Die einfachste Lösung ist nur eine Auto-Marge zu verwenden, und geben Sie Ihrem div eine feste Breite und Höhe. Dies wird in IE7, FF, Opera arbeiten, Safari und Chrome:
HTML:
<body>
<div class="centered">...</div>
</body>
CSS:
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
margin: auto;
width: 400px;
height: 200px;
}
EDIT !! Entschuldigung, ich habe gerade bemerkt, dass du vertikal gesagt hast ... der Standardrand für "auto" für oben und unten ist null ... also wird es nur horizontal zentriert. Die einzige Lösung, um vertikal und horizontal zu positionieren, besteht darin, mit negativen Rändern herumzuwandern, wie die akzeptierte Antwort.
Sie können auch Ihre div mit dem folgenden:
#something {width: 400px; margin: auto;}
Bei dieser Einstellung wird das div einen Satz mit, und die Marge und auf beiden Seiten werden in Abhängigkeit von dem mit dem Browser automatisch eingestellt.
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
#distance
{
width:1px;
height:50%;
margin-bottom:-300px;
float:left;
}
#something
{
position:relative;
margin:0 auto;
text-align:left;
clear:left;
width:800px;
min-height:600px;
height:auto;
border: solid 1px #993333;
z-index: 0;
}
/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="something">
</div>
</body>
</html>
in FF2-3 getestet, IE6-7, Opera und funktioniert gut!
für ältere Browser, müssen Sie diese Zeile auf der HTML-doc hinzufügen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
versuchen, diese
#center_div
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Mit dieser:
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
.center {
margin: auto;
margin-top: 15vh;
}
Sollte Mach den Trick
Warum eine negative Marge hier? Vielen Dank! –
Da es die Größe der div versetzt. Oben und links auf 50% gesetzt würde das obere und linke Element in der Mitte der Seite, nicht das Element selbst. Die negativen Ränder sind genau halb so groß wie das Element und machen den Unterschied aus, so dass das Element selbst zentriert ist, nicht nur seine obere und linke Seite. – tj111
Ew. Warum solltest du absolut positionieren müssen? Verwenden Sie das verdammte Kastenmodell, wie es entworfen wurde. –