Wie man ein Element horizontal zentriert

Question

Wie kann ich eine horizontale Zentrierung einer <div> in einem anderen <div> CSS verwenden?

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

Answer 1

Die bekannteste Methode, die weit verbreitet ist und in viele Browser einschließlich der alten, ist mit margin wie unten:

#parent {
  width: 100%;
  background-color: #CCCCCC;
}

#child {
  width: 30%; /* We need the width */
  margin: 0 auto; /* This does the magic */
  color: #FFFFFF;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Führen Sie den Code aus, um zu sehen, wie er funktioniert. Außerdem gibt es zwei wichtige Dinge, die Sie in Ihrem CSS nicht vergessen sollten, wenn Sie versuchen, auf diese Weise zu zentrieren: margin: 0 auto; . Das macht es zu dem gewünschten Zentrum. Und vergessen Sie nicht width des Kindes, sonst wird es nicht wie erwartet zentriert!

Answer 2

Zentrieren eines div in einem div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;                            
  //justify-content: center;

  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  

  //align-self: center;                     
}

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

Answer 3

Verwendung:

<div id="parent">
  <div class="child"></div>
</div>

Stil:

#parent {
   display: flex;
   justify-content: center;
}

Wenn Sie es horizontal zentrieren wollen, sollten Sie wie folgt schreiben:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

Answer 4

Sie können die calc-Methode verwenden. Die Verwendung gilt für das Div, das Sie zentrieren. Wenn Sie seine Breite kennen, sagen wir, es ist 1200 Pixel, gehen für:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Im Grunde wird also ein linker Rand von 50% minus der Hälfte der bekannten Breite hinzugefügt.

Answer 5

Hier ist eine weitere Möglichkeit, die horizontale Zentrierung mit Flexbox und ohne Angabe einer Breite für den inneren Container. Die Idee ist, Pseudo-Elemente zu verwenden, die den inneren Inhalt von rechts und links schieben.

使用方法 flex:1 auf Pseudo-Element wird sie füllen die verbleibenden Räume und nehmen die gleiche Größe und der innere Container wird zentriert werden.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Wir können die gleiche Situation auch für die vertikale Ausrichtung betrachten, indem wir einfach die Richtung der Biegung in eine Spalte ändern:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>