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

En el desarrollo web, es crucial crear el diseño del elemento correctamente. Sin embargo, muchas propiedades de CSS, como CSS3 Flexible Box, son útiles para ajustar el diseño de las páginas web y los elementos HTML. Flexible Box se utiliza para organizar páginas web y aplicaciones de forma recursiva. Este modo Flexbox ayuda a crear diseños para aplicaciones y páginas web 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 “ alinear elementos ” propiedad y “ justificar-contenido ' propiedad. La propiedad 'align-items' 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 asígnele la clase “ contenido principal ”. Entre las etiquetas '

', agregue un ' ” elemento con los siguientes atributos:

---

---

• “ origen El atributo ” se utiliza para especificar la URL de la imagen.
• “ todo El atributo ” define un 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 “

  ” para incrustar el párrafo en la página.

Aquí está el código HTML:

< división clase = 'contenido principal' >
  < imagen origen = '/images/laptop-notepad.jpg' todo = 'Portátil con bloc de notas y bolígrafo' ancho = '300' >
  < pag > Laptop es una computadora portátil también conocida como una computadora portátil. pag >
división >

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

Clase de estilo 'contenido principal'

.contenido principal {
altura: 50 % ;
color de fondo: #46C2CB;
tamaño de fuente: 24px;
relleno: 10px;
}

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

• “ altura La propiedad ” se usa 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 el espacio alrededor del contenido del elemento.

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

Avancemos para aplicar las propiedades CSS que ayudan a centrar el “

” elemento verticalmente. Agregue estas propiedades a la clase “ contenido principal ” que se utilizan para acceder al elemento

:

mostrar: doblar ;
alinear elementos: centro;

Aquí está la descripción:

• “ mostrar ' propiedad ' doblar ” se usa para hacer que el diseño div sea flexible para su elemento.
• “ alinear elementos ” La propiedad CSS se establece como un “ centro ”, que alineará verticalmente los elementos div.

Producción

Ha aprendido cómo centrar un elemento div verticalmente para todos los navegadores que usan CSS.

Conclusión

Para centrar verticalmente un elemento div, el CSS “ mostrar ” propiedad se utiliza con el “ doblar ' valor. Este valor hace que el contenedor

sea flexible para sus elementos. Para alinear verticalmente el elemento div, ajuste el ' alinear elementos ” propiedad y asígnele un “ centro ' valor. Este blog le ha mostrado cómo usar CSS para centrar verticalmente elementos div en todos los navegadores.