Lorsque nous écrivions le cheval, nous ne connaissions probablement pas grand chose sur la méthode de centrage horizontal et vertical. Je vais donc vous donner un résumé de plusieurs méthodes de centrage horizontal et vertical couramment utilisées.
première méthode <!--code de boîte html--><!--centré horizontalement et verticalement--><div class=Centered1> <p>d premier type</p></div><!-partie de style CSS--> .Centered1{ couleur d'arrière-plan : #800070 ; largeur : 100 % ; hauteur : 500 px ; position : relative } .Centered1 p{ largeur : 200 px ; 200px ; couleur d'arrière-plan : rose profond ; hauteur de ligne : 200 px ; alignement du texte : auto ; Deuxième méthode <!--code de boîte html--><!--centré horizontalement et verticalement--><div class=Centered2> <p>dSecond type</p></div><!-partie de style css--> / *La deuxième méthode est le centrage horizontal et vertical*/ .Centered2{ background-color: #ef8518; width: 100%; height: 500px; 200px ; hauteur : 200 px ; couleur d'arrière-plan : rouge ; hauteur de ligne : 200 px ; alignement du texte : centre gauche : 50 % ; marge-gauche : -100 px ; Troisième méthode <!--code de boîte html--><!--centré horizontalement et verticalement--><div class=Centered3> <p>d troisième type</p></div><!-partie de style CSS--> /*La troisième méthode est le centrage horizontal et vertical*/ .Centered3{ background-color: dimgrey; width: 100%; height: 500px; 200px ; hauteur : 200 px ; couleur d'arrière-plan : orange foncé ; hauteur de la ligne : 200 px ; alignement du texte : gauche : 50 % ; quatrième méthode <!--code de boîte html--><!--centré horizontalement et verticalement--><div class=Centered4> <p>d quatrième type</p></div><!-partie de style CSS--> /*La quatrième méthode est le centrage horizontal et vertical, ancienne version de la disposition flexible*/ .Centered4{ background-color: #FF4444; width: 100%; height: 500px; -webkit-box-pack:center; -webkit-box-align: center; } .Centered4 p { width: 200px; background-color:line-height: 200px; La cinquième méthode <!--code de boîte html--><!--centré horizontalement et verticalement--><div class=Centered5> <p>d cinquième type</p></div><!-partie de style CSS--> /*La cinquième méthode est le centrage horizontal et vertical, la nouvelle version de flex est le centrage horizontal et vertical*/ .Centered5{ background-color: darkslateblue; width: 100%; display: flex; ; align-items ; } .Centered5 p { largeur : 200 px ; hauteur : 200 px ;Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.