So legen Sie fest, dass div in CSS relativ zur Webseite zentriert ist

So legen Sie mithilfe von CSS fest, dass das Div relativ zur Webseite zentriert ist: 1. Verwenden Sie das absolute Layout „position:absolute;“ für das Div und legen Sie die Werte für oben, links, rechts und unten fest equal; 2. Verwenden Sie das absolute Layout für das Div und setzen Sie die Werte von left auf „50 %“. 3. Zentrieren Sie das Div über das Transformationsattribut von CSS3.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie stelle ich das Div so ein, dass es relativ zur Webseite in CSS zentriert wird?

Css, um das Div zu zentrieren

1. Verwenden Sie das absolute Layout „position:absolute;“ für das Div von oben, links, rechts und unten Gleich, aber nicht unbedingt gleich 0; und set margin:auto

{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2 Verwenden Sie das absolute Layout für das Div und setzen Sie die oberen und linken Werte auf 50 %;

Methode 2: Diese Methode erfordert die Kenntnis der Breite und Breite des Div-Highs. Verwenden Sie absolute Layoutposition: absolut für das Div; und setzen Sie die Werte von oben und links auf 50 %; 50 % bezieht sich auf 50 % der Breite und Höhe des Seitenfensters; verschieben Sie schließlich das Div nach links und oben , links und oben Die Größe beträgt die Hälfte der Breite und Höhe des Div

{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

3. Das Div wird durch das Transformationsattribut von CSS3 zentriert.

Methode 3: Verwenden Sie die absolute Positionierung des Div: absolut und setzen Sie die Werte von links und oben auf 50 %. Verwenden Sie das CSS3-Transformationsattribut. transformieren: übersetzen (-50%, -50%)

{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}

Wenn zwei Divs vorhanden sind und das kleinere Div im Inneren horizontal, vertikal und zentriert relativ zum größeren Div außerhalb ausgerichtet ist, gibt es mehrere Methoden.

1. Verwenden Sie position und margin:auto, um dies zu erreichen. Das übergeordnete Element legt position: relative fest; das untergeordnete Element legt position: absolute fest und legt die Werte oben, links, rechts und unten gleich fest.

父元素{
position：relative；

}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2. Position verwenden. Das übergeordnete Element legt die Position fest: relativ; das untergeordnete Element legt die Position fest: absolut. Und setze oben und links auf 50 % und setze links und bis zur Hälfte der Größe des untergeordneten Elements

父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

Verwende display: flex. Für diese Methode sind Browserkompatibilitätseinstellungen erforderlich.

{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}

3. Verwenden Sie transform: Translate(). Das übergeordnete Element legt die Position fest: relativ; das untergeordnete Element legt die Position fest: absolut. Und oben und links auf 50 % stellen. Stellen Sie abschließend die Transformation ein: übersetzen (-50%, -50%)

父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}

Empfohlenes Lernen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass div in CSS relativ zur Webseite zentriert ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!