Zusammenfassung des CSS-zentrierten Layouts

Zentriertes Layout

demo

< /div>

1. Horizontal zentriert

1> Lösung 1 inlink-block text-align

.child {display:inlink-block;}

.parent {text-align:center;}

Vorteile: gute Kompatibilität

Nachteile: Breite und Höhe des Unterelements können nicht eingestellt werden

2> Option 2 Tabellenrand

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

Vorteile: Sie müssen nur das Kind (Sie selbst)

3> festlegen 🎜>

.parent {position:relative;}

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

Vorteile: Kind Elemente wirken sich nicht auf andere Elemente aus.

Nachteile: Kompatibilitätsprobleme

4> Option 4 flex justify-content

.parent {display:flex;justify-content :center;}

Vorteile: Legen Sie einfach den übergeordneten Knoten fest

oder setzen Sie ihn auf

.parent {display: flex;}

.Child {margin : 0 auto;} 🎜>

Nachteile: Die niedrigere Version von Flex IE unterstützt nicht

2. Vertikale Zentrierung

1> -cell Vertical-align

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

Vorteile: Legen Sie einfach den übergeordneten Knoten fest, gute Kompatibilität

2> ; Option 2 absolute Transformation

.parent {position:relative;}

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

Vorteile: Untergeordnete Elemente wirken sich nicht auf andere Elemente aus.

Nachteile: Kompatibilitätsprobleme -items:center;}

                                                                                                                                                 align:middle;

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

3> items

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

Idee: Verstehen Sie die Eigenschaften von Attributwerten und zerlegen Sie das Problem.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn