Explicação detalhada de vários métodos de centralização horizontal e vertical de HTML (Básico)

Quando estávamos escrevendo o cavalo, provavelmente não sabíamos muito sobre o método de centralização horizontal e vertical. Portanto, darei a você um resumo de vários métodos de centralização horizontal e vertical comumente usados.

 <!--código da caixa html--><!--centralizado horizontal e verticalmente--><div class=Centered1> <p>d primeiro tipo</p></div><!-parte de estilo css--> .Centerado1{ cor de fundo: #800070; largura: 100%; altura:500px; 200px; cor de fundo: deeppink; altura da linha: 200px; posição central: esquerda: 0;

 <!--código da caixa html--><!-centrado horizontalmente e verticalmente--><div class=Centered2> <p>tipo dSecond</p></div><!-css style part--> / *O segundo método é centralizado horizontal e verticalmente*/ .Centered2{ background-color: #ef8518; 200px; altura: 200px; cor de fundo: vermelho; altura da linha: -100px;

 <!--código da caixa html--><!-centrado horizontal e verticalmente--><div class=Centered3> <p>d terceiro tipo</p></div><!-css style part--> /*O terceiro método é centralização horizontal e vertical*/ .Centered3{ background-color: dimgrey; altura: 500px; 200px; altura: 200px; cor de fundo:laranja escuro:alinhamento do texto: centro: 50%;

 <!--código da caixa html--><!--centralizado horizontal e verticalmente--><div class=Centered4> <p>d quarto tipo</p></div><!-parte de estilo css--> /*O quarto método é centralização horizontal e vertical, versão antiga do layout flexível*/ .Centered4{ background-color: #FF4444; -webkit-box-pack:center; -webkit-box-align: center;Centerado4 p {largura: 200px; cor de fundo:cadetblue;

 <!--código da caixa html--><!--centralizado horizontal e verticalmente--><div class=Centered5> <p>d quinto tipo</p></div><!-parte de estilo css--> /*O quinto método é centralização horizontal e vertical, a nova versão do flex é centralização horizontal e vertical*/ .Centered5{ background-color: darkslateblue; ; alinhar itens: centro } .Centerado5 p {largura: 200px; altura: 200px;

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.