Lernen Sie 10 Möglichkeiten zum horizontalen und vertikalen Zentrieren in CSS kennen (Zusammenfassung)

Ein Muss für Vorstellungsgespräche. Sie werden es auf jeden Fall bei der Arbeit verwenden. Ähm, jeder versteht es. Ohne weitere Umschweife werde ich einfach eine Zusammenfassung und ein Rendering posten.

Zusammenfassen

• Die PC-Seite hat Kompatibilitätsanforderungen, die Breite und Höhe der Unterelemente sind festgelegt und es wird ein absoluter + negativer Rand empfohlen
• Die PC-Seite hat Kompatibilitätsanforderungen, die Breite und Höhe des Unterelements sind nicht festgelegt, absolute + Transformation wird empfohlen
• Keine Kompatibilitätsanforderungen auf PC-Seite, Flex wird empfohlen
• Flex wird für mobile Geräte empfohlen

Wie erziele ich den Effekt des obigen Bildes? Hier sind 10 häufig verwendete Methoden. Zuerst erstelle ich einen gemeinsamen Vorlagenstil

<Vorlage>
  <div Klasse="zwei">
    <div Klasse="übergeordnet">
      <div Klasse="Kind">123</div>
    </div>
  </div>
</Vorlage>

<style lang="less" scoped>
.Elternteil{
  Rand: 0 automatisch;
  Breite: 300px;
  Höhe: 300px;
  Rand: 1px durchgehend rot;
  Box-Größe: Rahmenbox;
  .Kind {
    Höhe: 100px;
    Breite: 100px;
    Hintergrund: #2f8df0;
  }
}
</Stil>

Anschließend werden die verwendeten spezifischen Stile separat in der Methode beschrieben. Zunächst werden 4 tägliche Layouttechniken vorgestellt.

1. Zentrieren Sie das Div horizontal innerhalb des Div und legen Sie die Breite der untergeordneten Elemente fest.

.Elternteil{
	Breite: 300px;
    Rand: 0 automatisch;
}

Hinweis: Wenn das untergeordnete Element display:table-cell und margin:0 auto; festlegt, ist dies ungültig.

2. Stellen Sie den Text vertikal zentriert ein und legen Sie die Höhe des Div fest, das den Text enthält.

.Kind{
    Textausrichtung: zentriert
    Zeilenhöhe: 100px //Wenn Sie die Höhe des untergeordneten Elements kennen, stellen Sie die gleiche Höhe wie die Höhe ein}

3. Zwei oder mehr Elemente auf Blockebene werden vertikal zentriert und das übergeordnete Element setzt Höhe und Zeilenhöhe gleich.

 .Elternteil{
     Zeilenhöhe: 300px; //Kennen Sie die Höhe des übergeordneten Elements und stellen Sie die gleiche Höhe wie die Höhe ein }
   .Kind1{
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
    Zeilenhöhe: initial; //Das Schlüsselwort initial wird verwendet, um eine CSS-Eigenschaft auf ihren Standardwert zu setzen.
   }
   .Kind2{
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
    Zeilenhöhe: initial; //Das Schlüsselwort initial wird verwendet, um eine CSS-Eigenschaft auf ihren Standardwert zu setzen.
   }

4. Lassen Sie ein Element den gesamten aktuellen Container füllen und setzen Sie absolute

.Elternteil{
Position: absolut;
oben: 0;
unten: 0;
links: 0;
rechts: 0;
}

OK, das war’s. Jetzt beginnen wir damit, wie man mit CSS eine horizontale und vertikale Zentrierung erreicht.

1. Sie müssen nicht die Breite und Höhe des untergeordneten Elements festlegen, sondern die Höhe des übergeordneten Elements. Absolute + Transform verwenden (empfohlen)

.Elternteil{
   Position: relativ 
}
.Kind{
    Position: absolut;
    oben: 50 %;
    links: 50 %;
    transformieren:übersetzen(-50 %,-50 %)
}

// Hinweis: Wenn Sie es nur oben und unten zentrieren müssen, behalten Sie einfach oben; wenn Sie es nur links und rechts zentrieren müssen, behalten Sie links. Stellen Sie translateY(-50%) oder translateX(-50%) ein.

2. Es ist nicht erforderlich, die Breite und Höhe der untergeordneten Elemente festzulegen, und es ist nicht erforderlich, die Breite und Höhe des übergeordneten Elements festzulegen. Verwenden Sie Flex -Layout (es wird empfohlen, Flex direkt auf Mobilgeräten zu verwenden
Auf der PC-Seite muss geprüft werden, welche Kompatibilität erforderlich ist. ）

.Elternteil{
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}
.Kind{
 
}

3. Sie müssen nicht die Breite und Höhe des untergeordneten Elements festlegen, aber Sie müssen die Höhe des übergeordneten Elements festlegen. Zeilenhöhe verwenden.
Hinweis: Bei dieser Methode muss die Textanzeige im untergeordneten Element über Textausrichtung auf den gewünschten Effekt zurückgesetzt werden

.Elternteil{
    Zeilenhöhe: 300px; //Stellen Sie die Höhe auf den gleichen Wert wie das übergeordnete Element ein. Textausrichtung: Mitte;
}
.Kind{
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
    Zeilenhöhe: initial; //Das Schlüsselwort initial wird verwendet, um eine CSS-Eigenschaft auf ihren Standardwert zu setzen.
    text-align: left; //Setze die Textanzeige auf den gewünschten Effekt zurück}

4. Sie müssen nicht die Breite und Höhe des untergeordneten Elements festlegen, aber Sie müssen die Höhe des übergeordneten Elements festlegen. CSS-Tabelle verwenden ( margin:0 auto dieses Elements wird nach der Verwendung ungültig)

.Elternteil{
    Anzeige: Tabellenzelle;
    vertikale Ausrichtung: Mitte;
    Textausrichtung: zentriert;
}
.Kind{
  Anzeige: Inline-Block;
}

5. Legen Sie die Breite und Höhe des untergeordneten Elements sowie die Höhe des übergeordneten Elements fest. Absoluten + negativen Rand verwenden

.Elternteil{
   Position: relativ 
}
.Kind{
    Position: absolut;
    oben: 50 %;
    links: 50%;
    margin-left: -50px; //Kennen Sie die Breite und Höhe des Unterelements margin-top: -50px; //Kennen Sie die Breite und Höhe des Unterelements}

6. Legen Sie die Breite und Höhe des untergeordneten Elements sowie die Höhe des übergeordneten Elements fest. Absolute + Marge automatisch verwenden

.Elternteil{
   Position: relativ 
}
.Kind{
    Position: absolut;
    oben: 0;
    links: 0;
    rechts: 0;
    unten: 0;
    Rand: automatisch;
}

7. Legen Sie die Breite und Höhe des untergeordneten Elements sowie die Höhe des übergeordneten Elements fest. Verwenden Sie absolute + calc (die Kompatibilität dieser Methode hängt von der Kompatibilität von calc ab)

.Elternteil{
   Position: relativ 
}
.Kind{
    Position: absolut;
    oben: berechnet (50 % – 50 Pixel);
    links: berechnet (50 % – 50 Pixel);
}

8. Schreibmodus verwenden (komplizierter zu verwenden, nicht empfohlen)

 // Gängige Stile stehen oben <div class="parent">
      <div Klasse="Box-Kind">
        <div Klasse="Kind">123</div>
      </div>
    </div>

.Elternteil{
     Schreibmodus: vertikal-lr; //Richtung der Textanzeige ändern Textausrichtung: Mitte;
}
.box-Kind{
    Schreibmodus: horizontal-tb;
    Anzeige: Inline-Block;
    Textausrichtung: zentriert;
    Breite: 100 %;
}
.Kind{
    text-align: left; //Textanzeige auf den gewünschten Effekt zurücksetzen margin: 0 auto;
}

9. Es ist nicht erforderlich, die Breite und Höhe von untergeordneten Elementen festzulegen, und es ist nicht erforderlich, die Breite und Höhe von übergeordneten Elementen festzulegen. Rasterlayout verwenden (nicht empfohlen, derzeit ist die Kompatibilität nicht sehr gut)

.Elternteil{
    Anzeige: Raster;
}
.Kind{
     selbst ausrichten: zentrieren;
     sich selbst rechtfertigen: zentrieren;
}

10. Tabellenlayout verwenden (reine Methode, wer verwendet heutzutage noch Tabellenlayout, hahahaha)

<Tabelle>
    <tbody>
        <tr>
            <td Klasse="übergeordnet">
                <div Klasse="Kind">123</div>
            </td>
        </tr>
    </tbody>
</Tabelle>

.Elternteil{
    Textausrichtung: zentriert;
}
.Kind{
    Anzeige: Inline-Block;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.