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?
Tharindu Lakshan
Punkte
1794
Asmit
Punkte
23
Einer der einfachsten Wege...
<!DOCTYPE html>
<html>
<head>
<style>
#outer-div {
width: 100%;
text-align: center;
background-color: #000
}
#inner-div {
display: inline-block;
margin: 0 auto;
padding: 3px;
background-color: #888
}
</style>
</head>
<body>
<div id ="outer-div" width="100%">
<div id ="inner-div"> I am a easy horizontally centered div.</div>
<div>
</body>
</html>
Shoma
Punkte
399
Wenn Sie ein Elternteil von einiger Größe haben, sagen wir, body{height: 200px} oder wie die unten hat Elternteil div#outer mit Höhe 200px, dann fügen Sie CSS Inhalt wie unten
HTML:
<div id="outer">
<div id="centered">Foo foo</div>
</div>CSS:
#outer{
display: flex;
width: 100%;
height: 200px;
}
#centered {
margin: auto;
}Dann wird der untergeordnete Inhalt, z. B. div#centered content, vertikal oder horizontal zentriert, ohne dass ein Positions-CSS verwendet wird. Um das Verhalten "vertikal mittig" zu entfernen, ändern Sie einfach den unten stehenden CSS-Code:
#centered {
margin: 0px auto;
}o
#outer{
display: flex;
width: 100%;
height: 200px;
}
#centered {
margin: auto;
}
<div id="outer">
<div id="centered">Foo foo</div>
</div>Demo: https://jsfiddle.net/jinny/p3x5jb81/5/
Fügen Sie nur einen Rahmen hinzu, um zu zeigen, dass das innere Div standardmäßig nicht 100% ist:
#outer{
display: flex;
width: 100%;
height: 200px;
border: 1px solid #000000;
}
#centered {
margin: auto;
border: 1px solid #000000;
}
<div id="outer">
<div id="centered">Foo foo</div>
</div>
Alessandro_russo
Punkte
1606
Mit Sass (SCSS-Syntax) können Sie dies mit einer mixin :
Mit übersetzen
// Center horizontal mixin
@mixin center-horizontally {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
// Center horizontal class
.center-horizontally {
@include center-horizontally;
}In einem HTML-Tag:
<div class="center-horizontally">
I'm centered!
</div>Erinnern Sie sich an zum Hinzufügen position: relative; an das übergeordnete HTML-Element.
Mit Flexbox
使用方法 flex können Sie dies tun:
@mixin center-horizontally {
display: flex;
justify-content: center;
}
// Center horizontal class
.center-horizontally {
@include center-horizontally;
}In einem HTML-Tag:
<div class="center-horizontally">
<div>I'm centered!</div>
</div>Versuchen Sie dieser CodePen !
Utkarsh Tyagi
Punkte
981
So richten Sie ein Div innerhalb eines Divs mittig aus -
.outer{
width: 300px; /* For example */
height: 300px; /* For example */
background: red;
}
.inner{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: yellow;
}
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>Dadurch wird das interne Div sowohl vertikal als auch horizontal in der Mitte ausgerichtet.
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.