Teilen Sie 7 Techniken zum Erreichen einer vertikalen Zentrierung in CSS (mit Code)

Die Nachfrage nach vertikaler Zentrierung von CSS auf Webseiten hat nie aufgehört, und ihre Schwierigkeit war noch nie einfacher. Nach Recherchen aller Entwickler heißt es, dass es fast zehn Techniken zur vertikalen Zentrierung für CSS gibt Es ist bekannt, dass einige Unternehmen die Fähigkeiten zur vertikalen CSS-Zentrierung als Interviewfragen betrachten. Heute werde ich Ihnen die verschiedenen Möglichkeiten der vertikalen CSS-Zentrierung vorstellen.

1. Zeilenhöhe

Anwendbare Szenarien: vertikale Zentrierungstechnik für einzeiligen Text

Diese Methode dürfte den meisten Menschen bekannt sein und wird häufig in einzeiligem Text verwendet. Die häufigste Art, Text anzuwenden, sind Objekte wie Schaltflächen oder Elemente wie Dropdown-Felder und Navigation. Das Prinzip dieser Methode besteht darin, dass sich der Text nach dem Festlegen der Zeilenhöhe einer einzelnen Textzeile in der vertikalen Mitte der Zeilenhöhe befindet. Mit diesem Prinzip kann die vertikale Zentrierungsanforderung leicht erreicht werden.

<div class="content">Lorem ipsam.</div>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

2. Zeilenhöhe + Inline-Block

Anwendbares Szenario: Vertikale Zentrierungstechnik für mehrere Objekte

Da Sie verwenden können Das erste: Wenn Sie die vertikale Zentrierung von Zeilenelementen auf eine Weise erreichen können, gibt es natürlich keinen Grund, warum Sie dies nicht mit mehreren Zeilen tun können ~ Sie müssen jedoch mehrere Elemente oder mehrzeilige Elemente als ein Zeilenelement behandeln Wir müssen diese Daten in eine Ebene einpacken und auf Inline-Block setzen und Inline-Block im äußeren Objekt des Inline-Block-Objekts verwenden, um die Höheneinstellung zu ersetzen, damit der Zweck der vertikalen Zentrierung erreicht werden kann dass Ihre Daten enthalten sind. Titel und Inhalt können auch normal vertikal zentriert werden.

<div class="box box2">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

3. :before + inline-block

Anwendbares Szenario: Vertikale CSS-Zentrierungstechnik für mehrere Objekte

:before pseudo- Die Schreibmethode für Elemente mit dem Inline-Block-Attribut sollte eine sehr traditionelle vertikale Zentrierungstechnik sein. Der Vorteil dieser Methode besteht darin, dass das untergeordnete Element zentriert werden kann, ohne dass die Höhe speziell festgelegt wird Um die Höhe des Inline-Blocks auf 100 % festzulegen, können Sie in Kombination mit der Einstellung der untergeordneten Elemente, die zentriert werden müssen, Vertical-Align: Middle verwenden, um den Zweck der vertikalen Zentrierung zu erreichen In der Vergangenheit war die Lösung eine großartige vertikale Zentrierungslösung, die nur den kleinen Fehler von 4 bis 5 Pixeln zwischen Inline-Block-Elementen beheben musste, aber auch sehr praktisch ist.

<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:&#39;&#39;;
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

4. Absoluter + negativer Rand

Anwendbares Szenario: Vertikale Zentrierungstechnik für mehrzeiligen Text

Wer hat gesagt, dass absolute Positionierung ist? notwendig Weniger verwenden? Amos glaubt, dass es kein Problem ist, weniger und mehr zu verwenden. Der entscheidende Punkt ist, ob Sie es richtig verwenden. In diesem Beispiel wird die absolute Positionierung auf 50 % der Raumhöhe eingestellt und dann der Rand festgelegt -Top des zentrierten Elements Stellen Sie die Höhe auf die negative Hälfte ein, damit das Element zentriert werden kann. Ist diese Methode eine seit vielen Jahren weitergegebene Methode?

<h2>4.absolute + margin 負值</h2>
<div class="box box4">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

5. Absolut + Rand automatisch

Anwendbares Szenario: Vertikale Zentrierungstechnik für mehrzeiligen Text

Eine weitere absolute vertikale Positionierung Zentriert Lösung: Diese Methode ist etwas speziell. Wenn das Element auf absolute Positionierung eingestellt ist, wird davon ausgegangen, dass es nicht den gesamten verfügbaren Speicherplatzbereich erfassen kann. Daher ist margin:auto ungültig, wenn Sie jedoch top:0;bottom:0 festlegen ;, das absolut positionierte Element hat den verfügbaren Platz erfasst. Zu diesem Zeitpunkt wird Ihr margin:auto wirksam (magisch). Wenn Ihr absolut positioniertes Element horizontal auf der übergeordneten Ebene zentriert werden muss, können Sie auch left :0; festlegen. right:0; damit das absolut positionierte Element den verfügbaren Platz erhalten kann, und setzen Sie dann margin-left und margin-right auf auto, um es zu zentrieren. Der Nachteil dieser Methode besteht jedoch darin, dass Ihr positioniertes Element eine feste Breite und Höhe (auch der Prozentsatz zählt) haben muss, um richtig zentriert zu sein.

<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

6. Anzeige: Tabellenzelle

Anwendbares Szenario: vertikale Zentrierungstechnik für mehrzeiligen Text

Ich denke, dieser Trick Ältere Entwickler sollten es natürlich gesehen haben, es ist das erste Mal, dass ein neuer Entwickler wie ich es sieht. Das Prinzip dieses Tricks besteht darin, die CSS-Anzeigeeigenschaft zu verwenden, um das Div auf eine Tabellenzelle zu setzen Verwenden Sie das Vertical-Align-Attribut, das die Ausrichtung von Speicherzellen unterstützt, um Informationen vertikal zu zentrieren

<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

7. Auffüllung

Anwendbare Szenarien: vertikale Zentrierung von mehrzeiligem Text Tipps

Was! Dies gilt auch als vertikale Zentrierungstechnik, richtig

Ja, das ist tatsächlich eine vertikale Zentrierungsmethode. Es lässt sich nicht leugnen, dass diese Methode wirklich zu einfach ist Entwickler denken, dass diese Methode nicht als vertikale Zentrierungstechnik angesehen werden kann, aber Sie können die Tatsache nicht widerlegen, dass meine Daten tatsächlich vertikal zentriert sind. Stellen Sie sich einfach vor, dass ich konkav bin >

<h2>22.padding</h2>
<div class="box box22">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

Zusammenfassung: Das Obige stellt Ihnen 7 vertikale CSS-Zentrierungstechniken vor. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Das obige ist der detaillierte Inhalt vonTeilen Sie 7 Techniken zum Erreichen einer vertikalen Zentrierung in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!