Zentriertes Layout
< /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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
