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

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 2

Ich habe Flexbox o CSS-Raster

1. Flexbox

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

2. CSS-Raster

   #outer {
       display: inline-grid;
       grid-template-rows: 100px 100px 100px;
       grid-template-columns: 100px 100px 100px;
       grid-gap: 3px;
   }

Sie können das Problem auf verschiedene Weise lösen.

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

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>

Answer 5

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!