Heim >Web-Frontend >CSS-Tutorial >Teilen Sie 7 Möglichkeiten, mit CSS eine vertikale Zentrierung zu erreichen
Teilen Sie 7 Möglichkeiten, mit CSS eine vertikale Zentrierung zu erreichen
- 高洛峰Original
- 2017-03-21 17:10:541572Durchsuche
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>
CSS-Code
.box1{
height: 200px;
}
.box2{
line-height: 200px;
}
(2)BildVertikal zentriert
HTML-Code
<p class="box1"> <img src="images/bg-sun.png" alt=""> </p>
CSS-Code
.box1{
line-height:200px;
}
.box1 img{
vertical-align: middle;
}
Methode 2: Tabellenzelle
CSS-Code
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
Methode 3: display:flex
(1) CSS-Code
.box1{
display: flex;
}
.box2{
margin:auto;
}
(2) CSS-Code
.box1{
display: flex;
justify-content:center;
align-items:center;
}
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;/*减去子元素宽度一半*/
}
(2 ) CSS-Code
.box2{
position: absolute;
top:calc(50% - 10px);/*减去子元素高度一半*/
left:calc(50% - 32px);/*减去子元素宽度一半*/
}
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;
}
Methode sechs: übersetzen
(1) CSS-Code
.box2{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
(2) HTML-Code
<body> <p class="box1"> </p> </body>
CSS-Code
.box1{
width: 200px;
height: 200px;
background: #666;
margin: 50vh auto 0;
transform: translateY(-50%);
}
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 }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!