Explicación detallada de varios métodos de centrado horizontal y vertical de HTML (Básico)

Cuando escribíamos el caballo, probablemente no sabíamos mucho sobre el método de centrado horizontal y vertical. Por eso, le daré un resumen de varios métodos de centrado horizontal y vertical comúnmente utilizados.

 <!--código de cuadro html--><!--centrado horizontal y verticalmente--><div class=Centrado1> <p>d primer tipo</p></div><!-parte de estilo css--> .Centrado1{ color de fondo: #800070; ancho: 100%; alto: 500px; posición: relativa } .Centrado1 p{ ancho: 200px; 200px; color de fondo: rosa intenso; altura de línea: 200px; alineación de texto: centro; margen: 0;

 <!--código de cuadro html--><!--centrado horizontal y verticalmente--><div class=Centrado2> <p>dSegundo tipo</p></div><!-parte de estilo css--> / *El segundo método es el centrado horizontal y vertical*/ .Centered2{ background-color: #ef8518; ancho: 100%; altura: 500px; posición: relativa } .Centered2 p { posición: absoluta; 200px; altura: 200px; color de fondo: rojo; altura de línea: 200px; margen superior: -100px;

 <!--código de cuadro html--><!--centrado horizontal y verticalmente--><div class=Centrado3> <p>d tercer tipo</p></div><!-parte de estilo css--> /*El tercer método es el centrado horizontal y vertical*/ .Centered3{ background-color: dimgrey; width: 100%; height: 500px; 200px; altura: 200px; color de fondo: naranja oscuro; altura de línea: 200px; alineación de texto: centro; arriba: 50%;

 <!--código de cuadro html--><!--centrado horizontal y verticalmente--><div class=Centrado4> <p>d cuarto tipo</p></div><!-parte de estilo css--> /*El cuarto método es el centrado horizontal y vertical, versión antigua del diseño flexible*/ .Centered4{ background-color: #FF4444; width: 100% height: 500px; -webkit-box-pack:center; -webkit-box-align: center } .Centered4 p { ancho: 200px; altura: 200px; color de fondo: altura de línea: 200px;

 <!--código de cuadro html--><!--centrado horizontal y verticalmente--><div class=Centrado5> <p>d quinto tipo</p></div><!-parte de estilo css--> /*El quinto método es el centrado horizontal y vertical, la nueva versión de flex es el centrado horizontal y vertical*/ .Centered5{ background-color: darkslateblue; width: 100% height: 500px; flex; ; align-items: center; .Centered5 p { ancho: 200px; alto: 200px; color de fondo: fucsia; altura de línea: 200px;

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.