So zentrieren Sie die Box horizontal in CSS3

So zentrieren Sie die Box horizontal in CSS3: 1. Verwenden Sie das Randattribut und fügen Sie dem Boxelement den Stil „margin: 0 auto;“ hinzu. 2. Verwenden Sie das flexible elastische Layout, um eine horizontale Zentrierung zu erreichen. Verwenden Sie Position und Transformation. Die Attribute sind horizontal zentriert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Wie man eine Box in CSS horizontal zentriert, ist eine sehr häufige Frage in Interviews. Die Zentrierung einer Box erfolgt relativ zum übergeordneten Element. Wenn wir die Box zentrieren, verwenden wir daher häufig die Verschachtelung, sodass die übergeordnete Box die untergeordnete Box verschachtelt .

So zentrieren Sie das untergeordnete Feld, wenn das übergeordnete und das untergeordnete Feld verschachtelt sind:

• Die erste Methode: Rand: 0 automatisch, mit Rahmen, aber die Verwendung von Rand wirkt sich auf die Verwendung anderer Felder aus, ist also nicht der Fall empfohlen;

• Die zweite Methode: Position, Positionierung verwenden, das untergeordnete Element muss mit dem übergeordneten Element identisch sein, dann links: 50%, Rand links: die Hälfte der negativen Boxbreite, dies ist die am häufigsten verwendete Methode;

• Die dritte Methode: Flex, flexibles Layout, zentriert das untergeordnete Feld, aber der Stil muss in das übergeordnete Feld geschrieben werden , display:flex, just-content:center;

• Vierte Methode: Basierend auf der Position , ändern Sie margin-left in die Transformation in CSS3: translator(-50px);

• Die fünfte Methode: Behalten Sie basierend auf der Position nur das untergeordnete und übergeordnete Element bei und fügen Sie dann margin:auto, left:0, right hinzu das untergeordnete Feld :0;
  Ergänzung: Bei der fünften Methode können Sie durch Hinzufügen von oben: 0 und unten: 0 eine vertikale und horizontale Zentrierung erreichen Positionierung, das untergeordnete Element muss mit dem übergeordneten Element identisch sein, dann links: 50 %, Rand links: die Hälfte der negativen Boxbreite:

  <div id="father">
      <div id="son"></div>
  </div>

  Flex, flexibles Layout, zentrieren Sie das untergeordnete Feld, aber der Stil muss
geschrieben werden die übergeordnete Box

:

<style>
    #father{
        width: 400px;
        height: 200px;
        border: 3px solid pink;
    }
    #son{
        width: 100px;
        height: 100px;
        border: 2px solid red;
    }
</style>

Behalten Sie basierend auf der Position nur das untergeordnete und übergeordnete Feld bei und fügen Sie dann margin:auto, left:0, right:0 zur untergeordneten Box hinzu:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 30px auto; /* 让父元素相对于body居中 */
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 0 auto;/* 让子元素相对于father居中 */
}
</style>

Die oben genannten Methoden können die Horizontale erreichen Zentrierung der Box Wenn Sie andere ausgezeichnete (seltsame) und auffällige (pai) Methoden haben, können Sie diese gerne umtauschen!

Die fünfte Methode wurde hinzugefügt: Durch Hinzufügen von oben: 0 und unten: 0 kann eine horizontale und vertikale Zentrierung erreicht werden:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
</style>

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Box horizontal in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!