Wie zentriere ich ein Div-Element auf dem Bildschirm nur mit CSS?

1. Stellen Sie die Position des Elements auf „absolut“ ein.
2. Legen Sie die Position oben und links fest Eigenschaften auf „50 %“.
3. Verwenden Sie negative Ränder, um die Position des Elements so zu versetzen, dass es angezeigt wird zentriert:
   

   <br> margin-top: -{height_of_element}/2;<br> margin-left: -{width_of_element}/2;<br>

Beispiel mit Fest Größe:

#myDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

Hinweis:

• Wenn Sie nicht möchten, dass das Element mit der Website scrollt, sollten Sie die Verwendung von „fest“ in Betracht ziehen. Positionierung statt „absolut“.
• Für ein dynamisches Element, das seine Größe anpasst, verwenden Sie JavaScript oder CSS calc(), um die korrekte Position zu berechnen Ränder.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Div-Element auf dem Bildschirm nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!