Einführung in die Methode zur Verwendung von CSS zur horizontalen und vertikalen Zentrierung von Divs

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 vonEinführung in die Methode zur Verwendung von CSS zur horizontalen und vertikalen Zentrierung von Divs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!