Wie zentriere ich zwei Absätze vertikal in einem DIV?

So zentrieren Sie zwei Elemente innerhalb eines DIV vertikal

Herausforderung: Das vertikale Zentrieren zweier Absatzelemente innerhalb eines DIV hat sich trotz der bewährten Vorgehensweise als Herausforderung erwiesen Tutorials.

Lösung:

Es gibt zwei Primäre Ansätze zur vertikalen Zentrierung von Elementen innerhalb eines DIV: Flexbox und CSS-Tabelle und -Positionierung.

Flexbox-Methode

Mit Flexbox können Sie eine präzise Ausrichtung mit minimalem Code erreichen:

#container {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

Vorteile der Flexbox-Methode:

• Minimal Code
• Vereinfachte Ausrichtung
• Vielseitige Layoutoptionen
• Responsives Design

CSS-Tabelle und Positionierungsmethode

Eine alternative Methode beinhaltet CSS-Tabellen und Positionierung:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  width: 300px;
  padding: 5px;
  margin: 7px auto;   
  text-align: center;
}

Wann sollte man Flexbox vs. verwenden? CSS-Tabelle und Positionierung:

Flexbox ist die empfohlene Wahl aufgrund seiner:

• Überragende Effizienz
• Umfassende Layoutfunktionen
• Verbessert Browser-Unterstützung

Flexbox erleichtert mühelos die vertikale Zentrierung und andere erweiterte Ausrichtungen Aufgaben, was es zur bevorzugten Wahl für die moderne Webentwicklung macht.

Das obige ist der detaillierte Inhalt vonWie zentriere ich zwei Absätze vertikal in einem DIV?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!