Zusammenfassung verschiedener zentrierter Layoutmethoden mit CSS

Dieser Artikel fasst verschiedene Zentrierungslayoutmethoden mithilfe von CSS zusammen.

In diesem Artikel wird die Situation beschrieben, in der die Zentrierungssituation auf eine variable Gesamtbreite und eine variable Inhaltsbreite eingestellt ist. (Immer noch zentriert, wenn die Größe geändert wird).

Besonderer Hinweis: Wenn Sie position:absolute; für ein Element festlegen, können Sie zusätzlich zur im Blog eingeführten CSS3-Methode auch einen negativen Rand zum Zentrieren verwenden. Dies löst das Kompatibilitätsproblem. aber nur geeignet für Situationen, in denen Breite und Höhe bekannt sind (da ein negativer Versatz die Hälfte der Breite und Höhe des Elements beträgt). Wenn sich Breite und Höhe ändern, gibt es keinen zentrierten Effekt mehr.

Untergeordnete Elemente in diesen Layouts verwenden aufgrund ihrer Attributeinstellungen standardmäßig die Inhaltsbreite.

Alle Zentrierungsbeispiele in diesem Artikel diskutieren nur die Implementierung von CSS. Der HTML-Code ist wie folgt vereinheitlicht:

<p class="parent">   
    <p class="child">demo</p>   
</p>

1 🎜>

1.1 Inline-Block mit Textausrichtung

.parent{   
    text-align: center;   
}   
.child{   
    display: inline-block;   
}

Vorteile: Die Kompatibilität ist sehr gut. Sie müssen nur *display:inline und *zoom:1 im CSS des untergeordneten Elements hinzufügen, um mit IE6 und 7 kompatibel zu sein wird auch horizontal zentriert sein, was die Beseitigung des Aufpralls erfordert.

1.2 Tabelle mit Rand

.child{   
    display:table;   
    margin: 0 auto;   
}

Vorteile: Die Einstellung ist sehr einfach Nur die Unterelemente müssen so eingestellt werden, dass sie IE8+ und IE6 und 7 unterstützen. Die Unterelemente können durch eine Tabellenstruktur ersetzt werden.

1.3 Absolutwert mit Transformation

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    left:50%;   
    transform: translateX(-50%);   
}

Vorteile: Das zentrierte Element nicht Arbeiten Sie mit anderen Elementen. Machen Sie eine Wirkung. Nachteile: Die neuen CSS3-Attribute unterstützen IE9+, Browser niedrigerer Versionen unterstützen dies jedoch nicht.

2. Vertikale Zentrierung

2.1 Tabellenzelle mit vertikaler Ausrichtung

.parent{   
    display: table-cell;   
    vertical-align:middle;   
}

Vorteile: Einfach einzurichten, einfach das übergeordnete Element festlegen, kompatibel mit IE8+, wenn Sie mit einer lokalen Version von kompatibel sein müssen Im Browser können Sie p ersetzen. Es handelt sich um eine Tabellenstruktur.

2.2 absolut mit Transformation

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    top: 50%;   
    transform: translateY(-50%);   
}

Vorteile: Das zentrierte Element ist nicht auf andere Elemente ausgerichtet Machen Sie eine Wirkung. Nachteile: Die neuen CSS3-Attribute unterstützen IE9+, Browser niedrigerer Versionen unterstützen dies jedoch nicht.

3. Horizontale + vertikale Zentrierung

3.1 Inline-Block mit Textausrichtung plus Tabellenzelle mit vertikaler Ausrichtung

.parent{   
    display: table-cell;   
    vertical-align:middle;   
    text-align:center;   
}   
.child{   
    display: inline-block;   
}

Vorteile: Umfassende Umsetzung der ersten beiden Methoden, gute Kompatibilität! Unterstützt IE8+ und ist auch mit Browsern niedrigerer Versionen kompatibel. Nachteile: Die Einrichtung ist komplizierter.

3.2 absolut mit Transformation

.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    transform: translate(-50%,-50%);   
}

Vorteile: Das zentrierte Element ist nicht auf andere Elemente ausgerichtet Machen Sie eine Wirkung. Nachteile: Die neuen CSS3-Attribute unterstützen IE9+, Browser niedrigerer Versionen unterstützen dies jedoch nicht.

4. All-in-One-Flex

css3 hat neue Layoutattribute, aber die Leistung ist etwas schlecht. Es unterstützt nur IE10+ und wird hauptsächlich auf mobilen Endgeräten verwendet.

4.1 Horizontale Zentrierung

/*当父元素设置display: flex;时，子元素为flex-item，默认为内容宽度。*/  
.parent{   
    display: flex;   
    justify-content: center;   
}   
/* 在设置子元素为margin: 0 auto;时，可删除父元素的justify-content: center;同样可以达到居中效果*/  
/*  .child{
        margin: 0 auto;   
    }*/

4.2 Vertikale Zentrierung

.parent{   
    display: flex;   
    align-items: center;   
}

4.3 Horizontale und vertikale Zentrierung

parent{       
    display: flex;       
    justify-content: center;       
    align-items: center;       
}       
/*如同flex布局的第一部分一样这里也可以对子元素进行下面的设置：同时删除上面的除去display外的其他属性*/      
/*  .child{   
        margin:auto;     
    } */

Das war's Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener zentrierter Layoutmethoden mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!