Frage Wie zentriert man ein
in ein anderes
?


Wie kann ich horizontal zentrieren? <div> in einem anderen <div> mit CSS (wenn es überhaupt möglich ist)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3626
2018-06-09 08:34


Ursprung


Antworten:


Sie können dieses CSS auf das Innere anwenden <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Natürlich müssen Sie das nicht einstellen width zu 50%. Beliebige Breite kleiner als das enthaltende <div> wird funktionieren. Das margin: 0 auto Was macht die eigentliche Zentrierung?

Wenn Sie auf IE8 + abzielen, ist es möglicherweise besser, dies stattdessen zu verwenden:

#inner {
  display: table;
  margin: 0 auto;
}

Es wird das innere Element horizontal zentrieren und es funktioniert, ohne ein bestimmtes zu setzen width.

Arbeitsbeispiel hier:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4087



Wenn Sie keine feste Breite auf dem inneren festlegen möchten div Sie könnten so etwas tun:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Das macht das Innere div in ein Inline-Element, das mit zentriert werden kann text-align.


1109



Die besten Ansätze sind mit CSS 3.

Kasten modell:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Entsprechend Ihrer Benutzerfreundlichkeit können Sie auch die box-orient, box-flex, box-direction Eigenschaften.

Biegen:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Weitere Informationen zum Zentrieren der untergeordneten Elemente

Und Dies erklärt, warum das Box-Modell der beste Ansatz ist:


297



Angenommen, dein div ist 200px breit:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Stellen Sie sicher, dass das übergeordnete Element ist positioniert d.h. relativ, fest, absolut oder klebrig.

Wenn Sie die Breite Ihres div nicht kennen, können Sie verwenden transform:translateX(-50%); anstelle der negativen Marge.

https://jsfiddle.net/gjvfxxdj/


215



Ich habe das erstellt Beispiel um zu zeigen, wie vertikal und horizontal  align.

Code ist im Grunde das:

#outer {
  position: relative;
}

und...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

und es wird in der bleiben center auch wenn du Größe neu bestimmen dein Bildschirm.


200



Einige Plakate haben die CSS 3-Methode zur Verwendung in der Mitte erwähnt display:box.

Diese Syntax ist veraltet und sollte nicht mehr verwendet werden. [Siehe auch dieser Beitrag].

Nur der Vollständigkeit halber ist hier der neueste Weg, CSS 3 mit Hilfe der Flexibles Box-Layout-Modul.

Also wenn du ein einfaches Markup hast wie:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... und Sie möchten Ihre Artikel in der Box zentrieren, was Sie für das übergeordnete Element (.box) benötigen:

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Wenn Sie ältere Browser unterstützen müssen, die ältere Syntax für flexbox verwenden hier ist ein guter Ort zum schauen.


156



Wenn Sie keine feste Breite festlegen und den zusätzlichen Rand nicht möchten, fügen Sie hinzu display: inline-block zu deinem Element.

Sie können verwenden:

#element {
    display: table;
    margin: 0 auto;
}

119



CSS3s Box-Align-Eigenschaft

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

74