Wie kann ich eine horizontale Zentrierung einer <div> in einem anderen <div> CSS verwenden?
<div id="outer">
<div id="inner">Foo foo</div>
</div>Antworten
Zu viele Anzeigen?
Ady Ngom
Punkte
1232
aamirha
Punkte
16
air5
Punkte
111
Mit Raster
Ein ziemlich einfacher und moderner Weg ist die Verwendung von display: grid :
div {
border: 1px dotted grey;
}
#outer {
display: grid;
place-items: center;
height: 50px; /* not necessary */
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="outer">
<div>Foo foo</div>
</div>
</body>
</html>
Josh Mc
Punkte
9344
Eine nette Sache, die ich vor kurzem entdeckt habe, ist die Kombination der Verwendung von line-height + vertical-align y el 50% linken Trick, können Sie center eine Box mit dynamischer Größe innerhalb einer anderen Box mit dynamischer Größe, sowohl horizontal als auch vertikal mit reinem CSS.
Beachten Sie, dass Sie Spans verwenden müssen (und inline-block ), getestet in modernen Browsern + Internet Explorer 8. HTML:
<h1>Center dynamic box using only css test</h1>
<div class="container">
<div class="center">
<div class="center-container">
<span class="dyn-box">
<div class="dyn-head">This is a head</div>
<div class="dyn-body">
This is a body<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</span>
</div>
</div>
</div>CSS:
.container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.center {
position: absolute;
left: 50%;
top: 50%;
}
.center-container {
position: absolute;
left: -2500px;
top: -2500px;
width: 5000px;
height: 5000px;
line-height: 5000px;
text-align: center;
overflow: hidden;
}
.dyn-box {
display: inline-block;
vertical-align: middle;
line-height: 100%;
/* Purely asthetic below this point */
background: #808080;
padding: 13px;
border-radius: 11px;
font-family: arial;
}
.dyn-head {
background: red;
color: white;
min-width: 300px;
padding: 20px;
font-size: 23px;
}
.dyn-body {
padding: 10px;
background: white;
color: red;
}
Legends
Punkte
18859
CSS 3:
Sie können den folgenden Stil für den übergeordneten Container verwenden, um die untergeordneten Elemente gleichmäßig horizontal zu verteilen:
display: flex;
justify-content: space-between; // <-- space-between or space-aroundEine schöne DEMO hinsichtlich der unterschiedlichen Werte für justify-content .
CanIUse: Browser-Kompatibilität
Versuchen Sie es!:
#containerdiv {
display: flex;
justify-content: space-between;
}
#containerdiv > div {
background-color: blue;
width: 50px;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="containerdiv">
<div>88</div>
<div>77</div>
<div>55</div>
<div>33</div>
<div>40</div>
<div>45</div>
</div>
</body>
</html>
37 Stimmen
Von diesen großartigen Antworten möchte ich nur hervorheben, dass Sie "#inner" eine "Breite" geben müssen, oder es wird "100%" sein, und Sie können nicht sagen, ob es bereits zentriert ist.
1 Stimmen
display:flex;ist am einfachsten zu merken (Chrome gibt Ihnen Anleitungen in DevTools) und unterstützt die Zentrierung auf beiden Achsen.