In unserem aktuellen Projekt gibt es viele Methoden zur vertikalen Zentrierung. Auf der mobilen Seite gibt es beispielsweise viele Popup-Eingabeaufforderungen Ich hoffe, es kann allen helfen.
Ich habe viele Seiten erstellt und habe das Gefühl, dass einige Methoden relativ einfach sind und andere auf der Grundlage der tatsächlichen Situation berechnet werden müssen Die Methode, die ich in der Praxis verwendet habe, ist vielleicht nicht die umfassendste, aber die praktische Wirkung ist immer noch gut.
Hören Sie auf, Unsinn zu reden, und gehen Sie direkt zum Code:
/* 常用的三种方法 */
/* 第一种 */
div{
width: 200px;
height: 200px;
margin: auto;
background: pink;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 第二种 */
div{
width: 200px;
height: 200px;
background: green;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
/* 第三种 */
div{
width: 200px;
height: 200px;
background: green;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Implementieren Sie einfach den HTML-Teil direkt
Verwandte Empfehlungen:
Analyse des CSS-Steuerelement-Bildlaufleistenstils
Detailliertes Beispiel für den benutzerdefinierten CSS3-Bildlaufleistenstil
Beispiel für die CSS-Einstellung des Div-Bildlaufleistenstils
Das obige ist der detaillierte Inhalt vonCSS zur horizontalen und vertikalen Zentrierung von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
