Fünf Methoden zur vertikalen Zentrierung von Inhalten in Divs

1. Zeilenhöhenmethode

Wenn nur eine Zeile oder ein paar Wörter vertikal zentriert werden müssen, ist es am einfachsten, sie einfach zu erstellen Text Die Zeilenhöhe entspricht der Höhe des Containers, zum Beispiel:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

Mit diesem Code kann der Effekt erzielt werden, dass der Text im Absatz vertikal zentriert wird.

2. Auffüllmethode

Eine andere Methode ist der Zeilenhöhenmethode sehr ähnlich. Sie eignet sich auch für die vertikale Zentrierung einer oder mehrerer Textzeilen Zentrieren Sie den Inhalt vertikal, zum Beispiel:

p { padding:20px 0; }

Die Wirkung dieses Codes ähnelt der Zeilenhöhenmethode.

3. Tabellenmethode simulieren

Stellen Sie den Container auf display:table ein und legen Sie dann das untergeordnete Element, also das Element, das vertikal in der Mitte angezeigt werden soll, auf display:table-cell fest , und fügen Sie dann Vertical-Align:Middle hinzu, um dies zu erreichen.

Die HTML-Struktur ist wie folgt:

<p id="wrapper">
    <p id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </p></p>

CSS-Code:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}

Leider werden IE7 und niedriger nicht unterstützt.

Viertens. CSS3-Transformation zum Implementieren des

CSS-Codes lautet wie folgt:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

Fünften: CSS3-Box-Methode zum Implementieren der horizontalen und vertikalen Zentrierung

HTML-Code:

<p class="center">
  <p class="text">
    <p>我是多行文字</p>
    <p>我是多行文字</p>
    <p>我是多行文字</p>
  </p></p>

CSS-Code:

.center {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

Das obige ist der detaillierte Inhalt vonFünf Methoden zur vertikalen Zentrierung von Inhalten in Divs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!