So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)

 position:fixiert; /*Legen Sie das Element fest, das Sie zentrieren möchten*/
 links: 50 %; /*oder rechts: 50 %*/
 oben: 50 %; /*oder unten: 50 %*/
 Rand links: - die halbe Breite des Elements; /*oder Rand rechts*/
 oberer Rand: - Hälfte der Elementhöhe; /*oder unterer Rand*/

<Kopf>
    <meta charset="UTF-8">
    <Stil>
    /*Das Feld wird im Browserfenster zentriert und nicht auf der gesamten Seite angezeigt. Wenn Sie die Seite nach oben und unten verschieben,
    Da das Box-Element unbeweglich ist, wird hier ein box_compare-Element als Referenz gesetzt, das seine Höhe über der Fensterhöhe angibt, sodass auf der Seite eine Bildlaufleiste erscheint*/
        .box_vergleichen {
            Breite: 100 %;
            Höhe: 1000px;
            Hintergrund: himmelblau;
        }
        
        .Kasten {
         /*Legen Sie die Breite und Höhe des Elements fest*/
            Breite: 500px; 
            Höhe: 300px;
            Hintergrund: blau;
            Position: fest;
            links: 50 %; /*Die äußerste linke Kante des Elements beträgt 50 % der Entfernung von der linken Seite des Fensters*/
            oben: 50 %; /*Die Oberkante des Elements beträgt 50 % des Abstands von der Oberkante des Fensters*/
            Rand oben: -150px;
            Rand links: -250px;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="box_compare"></div>
    <div Klasse="Box"></div>
</body>

Position: fest; /*Festgelegt für das Element, das Sie zentrieren möchten*/
links: 0;
rechts: 0;
oben: 0;
unten: 0;
Rand: automatisch;

<Kopf>
<meta charset="UTF-8">
 <Stil>
  /*box_compare hat die gleiche Vergleichsfunktion wie oben*/
     .box_vergleichen {
        Breite: 100 %;
           Höhe: 1000px;
           Hintergrund: himmelblau;
     }
     .Kasten {
           Breite: 60%;
           Höhe: 300px;
           Hintergrund: blau;
           Position: fest;
           links: 0;rechts: 0;
           oben: 0;unten: 0;
           Rand: automatisch;
      }
     </Stil>
</Kopf>
<Text>
     <div Klasse="box_compare"></div>
     <div Klasse="Box"></div>
</body>