Cómo centrar verticalmente un elemento div para todos los navegadores que usan CSS

En el desarrollo web, es crucial crear el diseño del elemento correctamente. Sin embargo, muchas propiedades de CSS, como la caja flexible CSS3, son útiles para ajustar el diseño de páginas web y elementos HTML. La caja flexible se utiliza para organizar páginas web y aplicaciones de manera recursiva. Este modo Flexbox ayuda a crear diseños para páginas web y aplicaciones complejas.

Esta publicación lo guiará sobre cómo centrar un elemento div para todos los navegadores que usan CSS verticalmente.

Cómo alinear el elemento Div usando CSS?

El elemento div se puede alinear verticalmente utilizando la propiedad de visualización "doblar"Junto con el CSS"ítems alineados"Propiedad y"Justify-Content" propiedad. La propiedad "Alinearse" "alinea el elemento verticalmente, y la propiedad" Justify-Content "alinea el contenido horizontalmente.

Ejemplo: cómo centrar verticalmente un elemento Div con CSS?

En HTML, primero, agregue un ""Elemento y asignarlo la clase"contenido principal". Entre las etiquetas "", agregue un ""Elemento con los siguientes atributos:

• "SRCEl atributo se utiliza para especificar la URL de la imagen.
• "alternativo"El atributo define algún texto que se mostrará en lugar de una imagen si no se carga.
• "ancho"El atributo se usa para ajustar el ancho de la imagen.
• Luego, agregue el "

  "Elemento para incrustar el párrafo en la página.

Aquí está el código HTML:

La computadora portátil es una computadora portátil también conocida como computadora portátil.

En CSS, especificaremos varias propiedades de estilo para el DIV.

Clase de estilo "Contente principal"

.contenido principal
Altura: 50%;
Color de fondo: #46C2CB;
tamaño de fuente: 24px;
relleno: 10px;

Las siguientes propiedades de CSS se definen en el "contenido principal" clase:

• "alturaLa propiedad se utiliza para ajustar la altura del contenedor.
• "color de fondo"Define el color de fondo del elemento.
• "tamaño de fuente"Especifica el tamaño de fuente del elemento.
• "relleno"La propiedad establece espacio alrededor del contenido del elemento.

Desde la salida, puede observar que el contenido del elemento div no está en el centro:

Avancemos para aplicar las propiedades de CSS que ayudan a centrar el ""Elemento verticalmente. Agregue estas propiedades a la clase "contenido principal"Que se utilizan para acceder al elemento:

Pantalla: Flex;
Alineación de ítems: Centro;

Aquí está la descripción:

• "mostrar" propiedad "doblar"Se usa para hacer que el diseño Div sea flexible a su elemento.
• "ítems alineados"La propiedad CSS se establece como una"centro", Que alineará verticalmente los elementos Div.

Producción

Has aprendido a centrar un elemento div verticalmente para todos los navegadores usando CSS.

Conclusión

Para centrar verticalmente un elemento div, el CSS "mostrar"La propiedad se utiliza con el"doblar" valor. Este valor hace que el contenedor sea flexible para sus elementos. Para alinear verticalmente el elemento div, ajusta el "ítems alineados"Propiedad y asignarlo un"centro" valor. Este blog le ha mostrado cómo usar CSS para centrar verticalmente los elementos div en todos los navegadores.