Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein DIV horizontal und vertikal zentrieren und gleichzeitig seinen Inhalt beibehalten?

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

Patricia Arquette
Freigeben: 2024-12-15 13:03:16
Original
203 Leute haben es durchsucht

How Can I Horizontally and Vertically Center a DIV While Preserving its Content?

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>
Nach dem Login kopieren

CSS:

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

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.

Das obige ist der detaillierte Inhalt vonWie kann ich ein DIV horizontal und vertikal zentrieren und gleichzeitig seinen Inhalt beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage