Cómo centrar verticalmente un tramo dentro de un div

La alineación vertical puede resultar confusa en CSS, y alinear un tramo dentro de un div no lo es excepción.

Comprensión de la alineación de CSS

Antes de profundizar en las soluciones, es fundamental comprender la verticalidad. alineación en CSS:

• Alineación natural: Los elementos en línea (como el intervalo) se alinean naturalmente en la línea base, que es la parte inferior del carácter más bajo.
• Altura de línea: La propiedad line-height establece la altura de un cuadro de línea, que encierra tanto el carácter como cualquier texto inicial. espacio.
• Altura intrínseca: La altura intrínseca de un elemento es el espacio que ocupa sin ningún estilo ni relleno.

Técnicas de alineación vertical

Para centrar un tramo verticalmente dentro de un div, considere estas técnicas:

1. Hacer coincidir la altura de la línea con la altura del contenedor:

Establezca la altura de la línea del tramo para que coincida con la altura del div. Por ejemplo, si el div tiene 15 px de alto, establezca line-height: 15 px; en el lapso.

2. Posicionamiento absoluto:

Establecer posición: absoluta; sobre el div y la posición: absoluta; arriba: 50%; en el lapso. Luego ajuste el valor del margen superior del tramo a la mitad de su altura intrínseca.

3. Transformar: traducirY

Utilice la transformación: traducirY(-50%); propiedad en el tramo. Esto desplaza verticalmente el tramo a la mitad de su altura intrínseca.

4. Flexbox

Utilice Flexbox para centrar verticalmente el tramo. Establecer pantalla: flex; alinear elementos: centro; en el div y el margen: auto; en el intervalo.

Ejemplo de código

Aquí hay un ejemplo que utiliza el método de altura de línea:

  as