Wie zentriere ich ein DIV horizontal und vertikal, ohne den Inhalt abzuschneiden?

Ein DIV horizontal und vertikal zentrieren, ohne den Inhalt abzuschneiden

Wenn Sie ein DIV vertikal und horizontal zentrieren möchten, ist es wichtig sicherzustellen, dass der Inhalt auch bei geöffnetem Fenster intakt bleibt wird kleiner als der Inhalt selbst.

Ein gängiger Ansatz beinhaltet absolute Positionierung und negative Margen. Allerdings kann diese Methode dazu führen, dass Inhalte abgeschnitten werden, wenn die Fenstergröße kleiner wird.

Für moderne Browser gibt es eine bessere Lösung mit Flexbox:

HTML

<div>

CSS

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Dieser Ansatz nutzt Transformationen, um den Inhalt zu übersetzen, ohne seine Größe zu beeinflussen. Dadurch bleibt der Inhalt unabhängig von den Fensterabmessungen zentriert.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein DIV horizontal und vertikal, ohne den Inhalt abzuschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!