Wie kann ich ein DIV horizontal und vertikal zentrieren und gleichzeitig seinen Inhalt beibehalten?

Horizontales und vertikales Zentrieren eines DIV mit Inhaltserhaltung

In Situationen, in denen die horizontale und vertikale Ausrichtung eines DIV entscheidend ist und der Inhalt erhalten bleiben muss Intakt ist es notwendig, Ansätze zu finden, die die Nachteile der absoluten Positionierung mit negativen Margen vermeiden.

Während Flexbox bietet Obwohl es sich um eine moderne Lösung handelt, die Inhalte gut ausrichtet, ist sie möglicherweise nicht für ältere Browser geeignet. Für eine breitere Kompatibilität sollten Sie die folgende Methode in Betracht ziehen:

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Dieser Ansatz nutzt absolute Positionierung und CSS-Transformationen (-webkit-transform und transformieren), um das DIV zu zentrieren. Die Transformationsfunktion verschiebt die Position des DIV um die Hälfte seiner Breite und Höhe in beide Richtungen. Dadurch wird sichergestellt, dass der Inhalt unabhängig von Fenstergröße oder Inhaltsvariationen erhalten bleibt.

Erkunden Sie diese Technik weiter auf Codepen oder JSBin, um sich von ihrer Wirksamkeit zu überzeugen. Für die Unterstützung älterer Browser sind möglicherweise alternative Methoden erforderlich, die an anderer Stelle in diesem Thread beschrieben werden.