Es gibt viele Lösungen, um eine Zentrierung zu erreichen. Hier stellen wir die Lösung von reinem CSS unter Verwendung von Absolutheit und Marge vor.
1. p Breite und Höhe sind fest
width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px;
margin-top ist -(height / 2), margin-left ist -(width / 2) . Natürlich können Sie den Rand nicht verwenden, das heißt, oben ist calc(100% - Höhe) / 2, links ist calc(100% - Breite) / 2, aber es wird empfohlen, calc() nicht zu verwenden, wenn Sie können.
2. p-Breite und -Höhe sind nicht festgelegt
width: 50%; height: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
Beachten Sie, dass dies für Situationen gilt, in denen die Breite und Höhe angegeben werden müssen, beispielsweise bei der Verwendung von Prozentsätzen oder mit jsDynamische Änderung, andernfalls kann es als 100 % behandelt werden.
Sie können translator() auch ohne Rand verwenden, wie folgt:
width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
3. CSS3 variable Breite, hohe Ebene, vertikale Zentrierung
justify-content: center; /* 子元素水平居中 */ align-items: center; /* 子元素垂直居中 */ display: -webkit-flex;
Fügen Sie es dem übergeordneten Element hinzu, um die untergeordneten Elemente horizontal und vertikal zu zentrieren.
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um div horizontal und vertikal zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
