Mehrere Möglichkeiten zum Zentrieren einer Box in der Webentwicklung

1. Notieren Sie mehrere Methoden zum Zentrieren der Box:

1,0, Rand mit fester Breite und Höhe zentriert;

2,0, negativer Rand zentriert;

3.0, absolute Positionierung und Zentrierung;

4.0, Tabellenzelle ist zentriert;

5.0, Flex zentriert;

6.0, Transformationszentrum;

7,0, unsichere Breite und Höhe zentriert (absoluter Positionierungsprozentsatz);

8.0, Schaltfläche ist zentriert.

2. Codedemonstration (html verwendet dieselbe Demo):

HTML-Demo:

<Text>
<div id="Behälter">
<div id="box"></div>
</div>
</body>


1.0, Rand feste Breite und Höhe zentriert (Demo)

Diese Positionierungsmethode basiert ausschließlich auf Breite, Höhe und Rand und ist nicht sehr flexibel.

CSS:

#Behälter {
Breite: 600px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
}
#Kasten {
Breite: 200px;
Höhe: 200px;
Rand: 150px 200px;
Hintergrundfarbe: #0ff;
}

2.0, Zentrierung mit negativem Rand (Demo)

Um einen negativen Rand zum Zentrieren zu verwenden, müssen Sie die feste Breite und Höhe kennen, was ziemlich einschränkend ist.

CSS:

#Behälter {
Position: relativ;
Breite: 600px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
}
#Kasten {
Position: absolut;
Breite: 200px;
Höhe: 200px;
links: 50%;
oben: 50 %;
Rand: -100px -100px;
Hintergrundfarbe: #0ff;
}

3.0, absolute Positionierung und Zentrierung (Demo)

Die Verwendung der absoluten Positionierung zum Zentrieren ist eine sehr gebräuchliche Methode.

CSS:

#Behälter {
Position: relativ;
Breite: 600px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
}
#Kasten {
Position: absolut;
Breite: 200px;
Höhe: 200px;
links: 0;
oben: 0;
rechts: 0;
unten: 0;
Rand: automatisch;
Hintergrundfarbe: #0ff;
}

4.0, Zentrieren von Tabellenzellen (Demo)

Verwenden Sie die Tabellenzelle, um die vertikale Zentrierung zu steuern.

CSS:

#Behälter {
Anzeige: Tabellenzelle;
Breite: 600px;
Höhe: 500px;
vertikale Ausrichtung: Mitte;
Rand: 1px durchgezogen #000;
}
#Kasten {
Breite: 200px;
Höhe: 200px;
Rand: 0 automatisch;
Hintergrundfarbe: #0ff;
}

5.0, flexible Zentrierung (Demo)

Die in CSS3 eingeführte neue Layoutmethode ist einfacher zu verwenden. Nachteile: Nicht kompatibel mit IE9 und darunter.

CSS:

#Behälter {
Anzeige: -webkit-flex;
Anzeige: Flex;
-webkit-align-items: zentrieren;
Elemente ausrichten: zentrieren;
-webkit-justify-content: zentrieren;
Inhalt ausrichten: zentriert;
Breite: 600px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
}
#Kasten {
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: #0ff;
}

6.0, Transform-Center (Demo)

Diese Methode macht flexiblen Gebrauch vom Transform-Attribut in CSS und ist relativ neu. Der Nachteil ist, dass es nicht mit IE9 kompatibel ist.

CSS:

#Behälter {
Position: relativ;
Breite: 600px;
Höhe: 600px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
}
#Kasten {
Position: relativ;
oben: 50 %;
links: 50%;
Breite: 200px;
Höhe: 200px;
transformieren: übersetzen(-50 %, -50 %);
-webkit-transform: übersetzen(-50 %, -50 %);
-ms-transform: übersetzen(-50 %, -50 %);
-moz-transform: übersetzen(-50 %, -50 %);
Hintergrundfarbe: #0ff;
}

7.0, Unsichere Breite und Höhe zentriert (absoluter Positionierungsprozentsatz) (Demo)

Diese Art der Zentrierung mit unsicherer Breite und Höhe ist flexibler. Stellen Sie einfach sicher, dass die Prozentwerte links und rechts gleich sind, um eine horizontale Zentrierung zu erreichen, und stellen Sie sicher, dass die Prozentwerte oben und unten gleich sind, um eine vertikale Zentrierung zu erreichen.

CSS:

#Behälter {
Position: relativ;
Breite: 600px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
}
#Kasten {
Position: absolut;
links: 30%;
rechts: 30%;
oben: 25 %;
unten: 25 %;
Hintergrundfarbe: #0ff;
}

8.0, Schaltflächenzentrierung (Demo)

Wenn Sie den Button als äußeren Container verwenden, werden die Blockelemente im Inneren automatisch vertikal zentriert. Sie müssen nur die horizontale Mitte steuern, um den Effekt zu erzielen.

HTML:

<Schaltfläche>
<div></div>
</button>

CSS:

Taste {
Breite: 600px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
}
div {
Breite: 200px;
Höhe: 200px;
Rand: 0 automatisch;
Hintergrundfarbe: #0ff;
}

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.

Originallink: http://www.cnblogs.com/likar/archive/2016/06/16/5590948.html