Varios métodos para centrar divs verticalmente.

Autor：Eve Cole Fecha de actualización：2013-03-25 17:35:46

Al hablar de este tema, algunas personas pueden preguntar: ¿no existe un atributo de alineación vertical en CSS para establecer el centrado vertical? Incluso si algunos navegadores no lo soportan, sólo necesito hacer un poco de CSS.

¡Hackear la tecnología es suficiente! Así que tengo que decir algunas palabras aquí. De hecho, existe un atributo de alineación vertical en CSS, pero solo ocurre para elementos que tienen el atributo valign en el elemento HTML (X).

Efectivo, como , , , etc. en elementos de tabla. Elementos como

y no tienen la función valign, por lo que no se puede usar alineación vertical en ellos.

efecto.

Tutorial relacionado: N formas de centrar div horizontalmente

1. Centrado vertical de una sola fila

Si solo hay una línea de texto en un contenedor, es relativamente sencillo centrarla. Solo necesitamos establecer su altura real para que sea igual a la altura de la línea.

como:

div {
altura: 25 píxeles;
altura de línea: 25 px;
desbordamiento: oculto;
}
Este código es muy simple. La configuración overflow:hidden se usa más adelante para evitar que el contenido exceda el contenedor o provoque un ajuste automático de línea, de modo que no se pueda lograr el efecto de centrado vertical. Más enseñanza de CSS

Procedimiento.

Centrar verticalmente una sola línea de texto

cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div {
altura: 25 píxeles;
altura de línea: 25 px;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
}

¡Ahora queremos centrar este texto verticalmente!

2. Centrado vertical de varias líneas de texto de altura desconocida

Si la altura de una parte del contenido es variable, entonces podemos usar el último método utilizado para lograr el centrado horizontal mencionado en la sección anterior, que consiste en configurar el relleno para que la parte superior e inferior

Los valores de relleno pueden ser los mismos. Nuevamente, esta es una forma de "mirar" el centrado vertical, es solo una forma de hacer que el texto llene completamente el

. Puedes usar algo como

El siguiente código:

div {
relleno: 25px;
}
La ventaja de este método es que se puede ejecutar en cualquier navegador y el código es muy simple, pero el requisito previo para este método es que la altura del contenedor debe ser escalable.

Centrado vertical de texto de varias líneas

cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div {
relleno: 25px;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
}

¡Ahora queremos centrar este texto verticalmente!
 div {
 relleno: 25px;
 borde: 1px sólido #FF0099;
 color de fondo:#FFCCFF;
 }

3. Centrar texto de varias líneas con altura fija

Al comienzo de este artículo, dijimos que el atributo de alineación vertical en CSS solo funcionará en etiquetas (X)HTML con atributos valign, pero también hay una visualización en CSS.

El atributo puede simular

, por lo que podemos usar este atributo para hacer que

simule

y usar alineación vertical. Tenga en cuenta que display:table y

Cómo usar display:table-cell, el primero debe configurarse en el elemento principal y el segundo debe configurarse en el elemento secundario, por lo que debemos agregar otro elemento

para el texto que debe ubicarse:

div#envoltura {
altura: 400 px;
pantalla: tabla;
}
div#contenido {
alineación vertical: medio;
pantalla: celda de tabla;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
}

Centrado vertical de texto de varias líneas

cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div#envoltura {
altura: 400 px;
pantalla: tabla;
}
div#contenido {
alineación vertical: medio;
pantalla: celda de tabla;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
}

¡Ahora queremos centrar este texto verticalmente! Webjx.Com
 div#envoltura {
 altura: 400 px;
 pantalla: tabla;
 }
 div#contenido {
 alineación vertical: medio;
 pantalla: celda de tabla;
 borde: 1px sólido #FF0099;
 color de fondo:#FFCCFF;
 ancho: 760 px;
 }

Este método sería ideal, pero desafortunadamente Internet Explorer 6 no comprende correctamente display:table y display:table-cell, por lo que este método se utiliza en

No es válido en Internet Explorer 6 y versiones anteriores. Bueno, ¡eso es deprimente! Sin embargo, tenemos otros métodos 4. Solución en Internet Explorer.

En Internet Explorer 6 y versiones anteriores, hay un error en los cálculos de altura. Después de colocar el elemento principal en Internet Explorer 6, si luego coloca el elemento secundario

Al realizar cálculos porcentuales, la base de cálculo parece ser heredada (si el valor posicionado es un valor absoluto, no hay problema, pero la base de cálculo porcentual ya no será la del elemento)

altura en lugar de la altura de posicionamiento heredada del elemento padre). Por ejemplo, tenemos el siguiente fragmento de código (X)HTML:

Si realizamos un posicionamiento absoluto en la subenvoltura, el contenido también heredará este atributo, aunque no se mostrará inmediatamente en la página, si el contenido se posiciona más.

Cuando las filas se colocan entre sí, la proporción del 100 % que utilice ya no será la altura original del contenido. Por ejemplo, si configuramos la posición de subenvoltura en 40%, si queremos que el contenido

Si el borde se superpone con el ajuste, se debe establecer top:-80%; luego, si configuramos el subwrap top:50%, debemos usar 100% para devolver el contenido a su posición original.

, pero ¿y si también configuramos el contenido al 50%? Entonces estará exactamente centrado verticalmente. Entonces podemos usar este método para lograr el centrado vertical en Internet Explorer 6:

div#envoltura {
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 400 px;
posición: relativa;
}
div#subenvoltura {
posición:absoluta;
borde: 1px sólido #000;
arriba: 50%;
}
div#contenido {
borde: 1px sólido #000;
posición: relativa;
arriba:-50%;
}
Por supuesto, este código sólo funcionará en navegadores con problemas informáticos como Internet Exlporer 6. (Pero no lo entiendo. Revisé muchos artículos y no sé si es por el

¿Son iguales o por alguna razón? Parece que muchas personas no están dispuestas a explicar el principio de este error en Internet Exlporer 6. Solo tengo una comprensión superficial y necesito estudiarlo más a fondo).

Centrado vertical de texto de varias líneas

cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div#envoltura {
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 400 px;
posición: relativa;
}
div#subenvoltura {
posición:absoluta;
arriba: 50%;
}
div#contenido {
posición: relativa;
arriba:-50%;
}

¡Ahora queremos centrar este texto verticalmente!
 div#envoltura {
 borde: 1px sólido #FF0099;
 color de fondo:#FFCCFF;
 ancho: 760 px;
 altura: 500 px;
 posición: relativa;
 }
 div#subenvoltura {
 posición:absoluta;
 borde: 1px sólido #000;
 arriba: 50%;
 }
 div#contenido {
 borde: 1px sólido #000;
 posición: relativa;
 arriba:-50%;
 }

5. La solución perfecta

Entonces podemos obtener una solución perfecta combinando los dos métodos anteriores, pero esto requiere conocimientos de pirateo de CSS. Para utilizar CSS Hack para distinguir entre navegadores, puede

Consulte este artículo "Truco simple de CSS: diferenciar entre IE6, IE7, IE8, Firefox y Opera":

div#envoltura {
pantalla: tabla;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 400 px;
_posición:relativa;
desbordamiento: oculto;
}
div#subenvoltura {
alineación vertical: medio;
pantalla: celda de tabla;
_posición:absoluta;
_arriba:50%;
}
div#contenido {
_posición:relativa;
_arriba:-50%;
}
En este punto se crea una solución de centrado perfecta.

Centrado vertical de texto de varias líneas

cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div#envoltura {
pantalla: tabla;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 400 px;
_posición:relativa;
desbordamiento: oculto;
}
div#subenvoltura {
alineación vertical: medio;
pantalla: celda de tabla;
_posición:absoluta;
_arriba:50%;
}
div#contenido {
_posición:relativa;
_arriba:-50%;
}

¡Ahora queremos centrar este texto verticalmente!
 div#envoltura {
 borde: 1px sólido #FF0099;
 color de fondo:#FFCCFF;
 ancho: 760 px;
 altura: 500 px;
 posición: relativa;
 }
 div#subenvoltura {
 posición:absoluta;
 borde: 1px sólido #000;
 arriba: 50%;
 }
 div#contenido {
 borde: 1px sólido #000;
 posición: relativa;
 arriba: -50%;
 }

ps El valor de alineación vertical de centrado es medio, mientras que el valor de alineación de centrado horizontal es centro. Aunque ambos están centrados, las palabras clave son diferentes.