CSS-zentriert

CSS-Zentrierung: 1. Die horizontale Zentrierung wird durch „margin: 0 auto; text-align: center“ erreicht. 2. Die horizontale Zentrierung wird durch „display:flex“ erreicht. cell“ und „margin-left“ erreichen eine Zentrierung.

So legen Sie die Zentrierung von CSS fest:

1. Verwenden Sie margin: 0 auto; text-align: center, um eine horizontale Zentrierung von CSS zu erreichen.

Diese Methode wird am häufigsten verwendet, um eine horizontale Zentrierung von CSS in der Front-End-Entwicklung zu erreichen, indem „margin: 0 auto; text-align: center“ verwendet wird.

2. Verwenden Sie display:flex, um eine horizontale Zentrierung von CSS zu erreichen.

Mit immer mehr Flexbox-Kompatibilität erfreut sich die Lösung der horizontalen Zentrierung von CSS durch „display:flex“ immer größerer Beliebtheit.

Das Prinzip der horizontalen CSS-Zentrierung durch display:flex besteht darin, dass das übergeordnete Element display:flex;flex-direction:column; und das untergeordnete Element align-self:center;

Dies ist dasselbe wie das Prinzip der vertikalen CSS-Zentrierung , außer in Flex. Es gibt Unterschiede in der -Richtung, einer ist Zeile (Standardwert) und der andere ist Spalte.

3. Implementieren Sie die horizontale CSS-Zentrierung durch display:table-cell und margin-left.

Für Situationen, in denen die Breite sowohl des übergeordneten Elements als auch des untergeordneten Elements bestimmt wird, ist es geeignet, die horizontale CSS-Zentrierung über display:table-cell und margin-left zu implementieren.

Bei Verwendung zeigt das übergeordnete Element Folgendes an: Tabellenzelle, und das untergeordnete Element erhält einen linken Rand von der Hälfte der verbleibenden Breite.

Das obige ist der detaillierte Inhalt vonCSS-zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!