In diesem Artikel werden hauptsächlich vier Möglichkeiten vorgestellt, wie Sie eine horizontale und vertikale Zentrierung von CSS erreichen. Im Plan habe ich auch die Breite und Höhe angegeben, dies bedeutet jedoch nicht, dass Breite und Höhe festgelegt sind. Aber ich dachte, ich könnte den Effekt nicht sehen, ohne Breite und Höhe anzugeben. Die Tatsache, dass diese Lösung die Breite und Höhe nicht festlegt, bedeutet, dass nach der Verwendung dieser Lösung die horizontale und vertikale Zentrierungsposition weiterhin gewährleistet werden kann, wenn sich die Breite und Höhe Ihres übergeordneten Elements und untergeordneten Elements ändern.
Die folgenden vier Lösungen sind alle erreichbar. Wenn sich die Breite und Höhe des übergeordneten Elements oder untergeordneten Elements ändert, bleibt das horizontal und vertikal zentrierte Layout erhalten.
HTML
<p class="father"> <p class="son"></p> </p>
CSS
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}HTML unverändert
<p class="father"> <p class="son"></p> </p>
css
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
} muss das übergeordnete Element auf display:table-cell einstellen und zum Erstellen Vertical und Text-Alignment verwenden Alle Inline-Elemente auf Blockebene werden horizontal und vertikal zentriert
Anzeige für untergeordnete Elemente festlegen: inline-block
html unverändert
<p class="father"> <p class="son"></p> </p>
css
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}HTML bleibt unverändert
<p class="father"> <p class="son"></p> </p>
CSS bleibt unverändert
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}Verwandte Empfehlungen:
So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest
Das obige ist der detaillierte Inhalt von4 Möglichkeiten, eine horizontale und vertikale Zentrierung in CSS zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
