Ausführliche Erläuterung der CSS-Elementzentrierung

Horizontal zentriert

Wenn es sich um ein Inline-Element handelt, verwenden Sie einfach text-align:center für das übergeordnete Element > Wenn es sich um ein Blockelement handelt (kein Floating), gibt es im Allgemeinen zwei Methoden, um eine horizontale Zentrierung zu erreichen: eine ist margin: 0 auto und die andere besteht darin, die Funktion calc über CSS zu berechnen 🎜> Vertikale Zentrierung

Wenn es sich um ein Inline-Element handelt, verwenden Sie im Allgemeinen line-height:{height} für das übergeordnete Element. Wenn es sich um ein Bildelement handelt, müssen Sie Vertical-Zentrierung verwenden. align on the element: middle; Darüber hinaus ist ersichtlich, dass die Elemente innerhalb des Tabellenelements td durch die Verwendung von Vertical-align:Middle und durch die Verwendung von Display:Table-Cell;Vertical vertikal zentriert werden können -align:middle; auf dem übergeordneten Element. Es ist auch möglich, Elemente vertikal zu zentrieren. Diese Methode kann sowohl für Inline-Elemente als auch für Blockelemente verwendet werden Blockelemente mit dieser Methode), dann kann die vertikale Zentrierung von Elementen durch einige Attribute wie die Position erreicht werden. Die grundlegenden Schritte sind: 1. Legen Sie die Position des übergeordneten Elements fest: relativ; %; left: 50%; 3. Legen Sie den Elementrand fest-top:-{height}/2;margin-left:-{width}/2;

Zentrierung schwebender Elemente

if Für schwebende Blockelemente (z. B. float:left) müssen Sie einige Attribute wie die Position verwenden, um die horizontale und vertikale Zentrierung des Elements zu erreichen. 1. Platzieren Sie ein p auf der äußeren Ebene des Elements und legen Sie seinen Stil fest: float:left;overflow:hidden;display:inlineblock 2. Setzen Sie das äußere p-Positionsattribut auf relativ, und die oberen und linken Werte sind; beide 50%; 3. Legen Sie den Elementstil fest: transform: Translate (-50%, -50%); Der obige Artikel über die Zentrierung von CSS-Elementen ist hoffentlich der gesamte Inhalt Es kann Ihnen eine Referenz geben, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Ausführlichere Erläuterungen zur CSS-Elementzentrierung und verwandte Artikel finden Sie auf der chinesischen PHP-Website!