Teilen Sie 7 Möglichkeiten, mit CSS eine vertikale Zentrierung zu erreichen-CSS-Tutorial-php.cn

Teilen Sie 7 Möglichkeiten, mit CSS eine vertikale Zentrierung zu erreichen

高洛峰

Freigeben： 2017-03-21 17:10:54

Original

1546 Leute haben es durchsucht

Heute wurde mein Blog-Antrag genehmigt. Ich werde Ihnen von den verschiedenen Methoden erzählen, die ich gesehen habe, um mithilfe von reinem CSS eine vertikale Zentrierung zu erreichen. Warum sollte dies der erste Artikel sein? Da dies das nützlichste Wissen ist, das ich gelernt habe, als ich zum ersten Mal Kontakt mit dem Front-End aufgenommen habe, hoffe ich, dass auch jeder davon profitieren kann!

Die Implementierung der horizontalen Zentrierung in CSS ist sehr einfach. Inline-Elemente legen den text-align:center ihrer übergeordneten Elemente fest, und Elemente auf Blockebene wenden magrin:auto auf sich selbst an. Das Erreichen einer vertikalen Zentrierung ist jedoch zunächst einmal eine äußerst häufige Anforderung. In der Praxis ist sie jedoch oft schwierig zu erreichen, insbesondere wenn die Designgröße nicht festgelegt ist. Hier sind einige Methoden, die ich gefunden habe:

Methode 1: ZeilenhöheZeilenhöhe

(1) Einzeiliger Text zentriert

HTML-Code

<p class="box1">
<p class="box2">垂直居中</p>
</p>

Nach dem Login kopieren

CSS-Code

 .box1{
   height: 200px;
 }
 .box2{
  line-height: 200px;
 }

Nach dem Login kopieren

(2)BildVertikal zentriert

HTML-Code

 <p class="box1">
   <img src="images/bg-sun.png" alt="">
 </p>

Nach dem Login kopieren

CSS-Code

 .box1{
   line-height:200px;
 }
 .box1 img{
   vertical-align: middle;
 }

Nach dem Login kopieren

Methode 2: Tabellenzelle

CSS-Code

 .box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }

Nach dem Login kopieren

Methode 3: display:flex

(1) CSS-Code

 .box1{
   display: flex;
 }
 .box2{
   margin:auto;
 }

Nach dem Login kopieren

(2) CSS-Code

 .box1{
   display: flex;
   justify-content:center;
   align-items:center;
 }

Nach dem Login kopieren

Methode 4: Absolute Positionierung und negative Ränder

(1) CSS-Code

 .box1{ 
   position: relative; 
 } 
   .box2{ 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   margin-top: -10px;/*减去子元素高度一半*/ 
   margin-left:-32px;/*减去子元素宽度一半*/
 }

Nach dem Login kopieren

(2 ) CSS-Code

 .box2{
   position: absolute;
   top:calc(50% - 10px);/*减去子元素高度一半*/
   left:calc(50% - 32px);/*减去子元素宽度一半*/
 }

Nach dem Login kopieren

Methode 5: Absolute Positionierung und 0

CSS-Code

 .box2{
   width: 50%;
   height: 50%;
   background: #555;
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
     }

Nach dem Login kopieren

Methode sechs: übersetzen

(1) CSS-Code

 .box2{
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
 }

Nach dem Login kopieren

(2) HTML-Code

 <body>
 <p class="box1">
 </p>
 </body>

Nach dem Login kopieren

CSS-Code

 .box1{
   width: 200px;
   height: 200px;
   background: #666;
   margin: 50vh auto 0;
   transform: translateY(-50%);
 }

Nach dem Login kopieren

Methode 7: display:-webkit-box

CSS-Code

 .box2{
   display: -webkit-box;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   -webkit-box-orient: vertical;
   text-align: center7 }

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen Sie 7 Möglichkeiten, mit CSS eine vertikale Zentrierung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!