Heim > Artikel > Web-Frontend > Lassen Sie uns über die Methode sprechen, mit CSS ein horizontal und vertikal zentriertes Layout zu realisieren
Lassen Sie uns über die Methode sprechen, mit CSS ein horizontal und vertikal zentriertes Layout zu realisieren
- 青灯夜游Original
- 2020-08-03 16:59:581963Durchsuche
Während eines kürzlichen Interviews fragte der Interviewer nach der horizontalen und vertikalen Zentrierungslayoutmethode von CSS. Ich war zweifellos verwirrt und habe die Informationen schnell nachgeschlagen Als ich frei war, möchte ich es analysieren und mit Ihnen teilen, um nicht in Fallstricke zu geraten.
Lassen Sie uns zunächst HTML und einige grundlegende CSS-Stile erklären, ich werde im Folgenden nicht auf Details eingehen!
HTML
<body> <div class="div1"> <div class="box size">垂直水平居中</div> </div> </body>
Der öffentliche CSS-Code lautet wie folgt
<style type="text/css">
/* 公共样式 */
.div1{
width: 300px;
height: 300px;
border:1px solid aqua;
}
.box{
background: #00FFFF;
}
.box.size{
width:100px;
height:100px;
}
</style>Diese CSS-Stile werden standardmäßig in die nachfolgende Einführung aufgenommen und wird nicht noch einmal beschrieben!
1. Absolut und Rand automatisch (häufig verwendet)
In ähnlicher Weise müssen die Breite und Höhe des zentrierten Elements festgelegt werden Breite und Höhe der untergeordneten Elemente müssen bekannt sein
Auf diese Weise können Sie es in alle Richtungen zentrieren, indem Sie den Abstand in alle Richtungen auf 0 und dann den Rand auf „Auto“ setzen
.div1{
position: relative;
}
.box{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}2. Absolut und Marge (negativer Wert)
Lassen Sie mich kurz das Prinzip erläutern. Die absolute Positionierung ist relativ zur Breite und Höhe des übergeordneten Elements, sodass wir das Element nach diesem Prinzip zentrieren können. Beachten Sie jedoch: Die absolute Positionierung basiert auf der oberen linken Ecke des untergeordneten Elements. Wenn Sie jedoch möchten, dass das untergeordnete Element in der Mitte angezeigt wird, müssen Sie dieses Problem lösen.
Zu diesem Zeitpunkt können Sie den negativen Wert des Randes verwenden, um den Effekt zu erzielen. Wenn der Rand negativ ist, wird das Element in die entgegengesetzte Richtung positioniert. Auf diese Weise können wir den Rand des Unterelements festlegen halb so breit und hoch wie das Unterelement. (PS: Der Nachteil ist, dass Sie die Breite und Höhe der untergeordneten Elemente ermitteln müssen)
.div1{
position: relative;
}
.box{
top: 50%;
left: 50%;
position: absolute;
margin-top: -50px;
margin-left: -50px;
}Absolut und rechnerisch
Die Breite und Höhe der untergeordneten Elemente muss festgelegt sein, und CSS3 verfügt über berechnete Eigenschaften, wenn Breite und Höhe bekannt sind.
Der Prozentsatz von oben basiert auf der oberen linken Ecke des Elements minus der Hälfte der Breite (PS: hängt von der Berechnungskompatibilität ab)
.div1{
position: relative;
}
.box{
position: absolute;
top: calc(50% - 50px );
/* 减号前后没有空格，该样式不生效*/
left: calc(50% - 50px );
}Als ich diesen Code schrieb, entdeckte ich etwas Interessantes: calc (50%-50px) Wenn vor und nach dem Minuszeichen keine Leerzeichen stehen, wird der Stil nicht wirksam. Wenn Sie Leerzeichen schreiben, wird er normalerweise nicht wirksam. emmmmm
unten Die Methode kann
HTML festlegen, ohne die Breite und Höhe der untergeordneten Elemente zu kennen. Ändern Sie es wie folgt:
<body> <div class="div1"> <div class="box">水平垂直居中，不需要子元素固定宽高</div> </div> </body>
Das öffentliche CSS lautet wie folgt folgt
.div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box{
background: #00FFFF;
}4. Flex (häufig verwendet)
Flex ist eine moderne Layoutlösung, die nur wenige Zeilen Code erfordert um den Zentriereffekt zu erzielen
.div1{
display: flex;
justify-content: center;
align-items: center;
} 5. line-height
Mit dem Zentrierattribut von Inline-Elementen können Sie auch horizontale und vertikale Werte erzielen Zentrierung. Legen Sie die Box als Inline-Element fest und verwenden Sie text-align, um eine horizontale Zentrierung oder eine vertikale Ausrichtung zu erreichen (PS: Diese Methode erfordert das Zurücksetzen der Textanzeige auf den gewünschten Effekt im untergeordneten Element)
.div1{
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box{
font-size: 10px;
display: inline-block;
vertical-align: middle;
line-height:initial;
/* 修正文字 */
text-align: left;
}6. absolut und transform
erfordert keine feste Breite und Höhe der untergeordneten Elemente, sondern hängt von der Kompatibilität von Translate2d ab
.div1{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}7. CSS-Tabelle
Das neue Tabellenattribut in CSS kann den Anzeigeeffekt gewöhnlicher Elemente in Tabellenelemente ändern und auch eine horizontale Zentrierung erreichen
.div1{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.box{
display:inline-block;
}Das oben Gesagte sind einige der zentrierten Layout-Methoden, die ich zusammengefasst habe. Wenn Sie weitere Ideen haben, können Sie diese gerne hinzufügen!
Persönliches Gefühl: Ich bevorzuge Absolute +Margin Auto, Flex, Absolute und Transform Am besten verwende ich Flex auf dem mobilen Endgerät auf dem PC-Terminal. automatisch
Empfohlene verwandte Tutorials: CSS-Video-Tutorial, CSS3-Video-Tutorial
Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Methode sprechen, mit CSS ein horizontal und vertikal zentriertes Layout zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!