Wie kann man ein DIV vertikal und horizontal zentrieren, ohne den Inhalt zu beschneiden?

Vertikale und horizontale DIV-Zentrierung ohne Inhaltsbeschneidung

Ihr Anliegen hinsichtlich der vertikalen und horizontalen Zentrierung eines DIV ohne Abschneiden von Inhalten ist ein gemeinsames. Während der traditionelle Ansatz mit absoluter Positionierung und negativen Rändern funktionieren kann, kann er dazu führen, dass Inhalte abgeschnitten werden, wenn die Fenstergröße kleiner als der DIV-Inhalt wird.

Glücklicherweise gilt für moderne Browser: es gibt fortgeschrittenere Optionen:

Flexbox

HTML:

<div>

CSS:

.content {<br> Position: absolut;<br> links: 50 %;<br> oben: 50 %;<br> -webkit-transform: Translate(-50 %, -50 %);<br> Transformation: Translate( -50%, -50%);<br>}<br>

Diese Lösung nutzt die Transformationseigenschaft, um den DIV-Inhalt um 50 % in beide Richtungen zu übersetzen und sicherzustellen, dass seine Mitte mit der Mitte des Fensters übereinstimmt.

Hinweis: Flexbox ist Wird in älteren Browsern nicht allgemein unterstützt, daher ist es wichtig, bei der Implementierung dieser Lösung die Browserkompatibilität zu berücksichtigen.

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