Adaptive Zentrierung

1. Zentrieren des Formulars

position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */

Kurze Analyse:

Position: feste Positionsanzeige (absolut|fest);

　【absolut: Die Fenstergröße wird durch das Eltern-Kind-Beziehungsfenster bestimmt, dessen obere Position absolut, fest oder relativ fest ist: Die Fenstergröße wird durch das Eltern-Kind-Beziehungsfenster bestimmt, dessen obere Position fest ist 】

oben, rechts, unten, links: Offset festlegen (|auto);

　　　【Wenn auf Auto eingestellt, bedeutet dies, dass das Fenster nicht in dieser Richtung zentriert ist; wie zum Beispiel: left:auto, das Fenster befindet sich in der horizontalen Position und wird nicht in der Mitte angezeigt]

Rand: adaptives Layout (automatisch);

Kann eingestellt werden oder nicht (< value>|auto);

　【Wenn nicht festgelegt, wird die Größe durch oben, rechts, unten, links bestimmt】

2. Adaptive Mischung von Text und Bildern Zentrierung

Kurze Analyse:

.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; }
.nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; }
    .nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; }
    .nav img { position: absolute;top: 0;left: 0;width: 25 px;height: 25 px;z - index: 10 }

.nav: Fenstergröße begrenzen;

[text-align: Spannweite horizontale Zentrierung begrenzen]

.nav -item: Steuern Sie die vertikale Zentrierung des Inhalts;

[Anzeige: Inhalte, die nebeneinander angezeigt werden sollen]

.nav span: Begrenzt den Anzeigebereich von Bildern;

[padding-left : Für Bilder Anzeigeraum freilassen; Anzeige: An die Anzeige anpassen]

　.nav img: Größe und Anzeigeposition des Bildes begrenzen

Perfekt, einfach weil es einfach ist.