Alinear Div al centro de la pantalla - Cruz Método Browser

Alineación de div al centro de la pantalla es simple. Puede alinear verticalmente y horizontalmente media centrar alinear un elemento div con la ayuda de reglas CSS.

A+ A-

Recientemente uno de los lectores TechWelkin comentó que la alineación de los elementos DIV es demasiado de un problema y utilizando el elemento TABLE es mucho mejor. Si desea colocar dos piezas de texto lado a lado, es más fácil de hacer con la tabla. Pues bien, los nuevos desarrolladores siempre se sienten de esa manera! Pero a medida que adquieren más experiencia y aprender nuevas cosas, se dan cuenta de que los elementos DIV son muy flexible y muy fácil de usar. Novatos a menudo preguntan, "cómo alinear y flotar un elemento DIV justo en el centro de la pantalla?". Este problema tiene tres partes:

  1. Alinear div elemento al centro horizontalmente
  2. Luego alinee div elemento en el medio verticalmente
  3. Y, por último flotar el div, para que se mantenga en el centro de la pantalla cuando el usuario se desplaza la pantalla.

Tal disposición es a menudo necesario cuando se desea mostrar un DIV "cuadro de mensaje". Los cuadros de mensaje en las páginas web se muestran tradicionalmente en el medio de la pantalla para conseguir la máxima atención por parte del visitante. Vamos a aprender cómo alinear un DIV en el medio de la pantalla del navegador. Vamos a comenzar con algo más simple:

Centrar horizontalmente un DIV

Este es el más sencillo. Todo lo que necesita hacer es fijar los márgenes izquierdo y derecho como auto. Navegador detectará esta propiedad CSS y hacer automáticamente la alineación horizontal. Por ejemplo:

 # Mi-div {
margin: 0 auto;
Anchura: 400px;
}

Tomar nota de que lo que se necesita para dar un ancho definido para el elemento div porque sin ancho especificado, div elemento ocupa todo el ancho de la pantalla. Como resultado de ello, sin ancho especificado, usted no será capaz de notar la alineación central.

Alinear verticalmente medio de un DIV en la pantalla

Esto es una cosa difícil de bits. Hay varias opciones disponibles para hacer la alineación vertical medio del elemento div -pero lo mejor y multi-navegador solución es mencionado por Billbad en StackOverflow :

HTML

<div class="outer">
<div class="middle">
<div class="inner">Content</div>
</div>
</div>

reglas CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}
TechWelkin.com también publica Consejos de Desarrollo Web y tutoriales.

TechWelkin.com también publica Consejos de Desarrollo Web y tutoriales.

Las reglas CSS anteriores funcionarán en todos los principales navegadores, excepto, por supuesto, las versiones antiguas de Internet Explorer. Como todos sabemos, Internet Explorer tiene sus propias reglas! Así que, por desgracia, tenemos que definir un conjunto diferente de propiedades a la IE. Vas a tener que añadir condicionalmente un archivo CSS independiente que contendrá las reglas a seguir por el IE.

DETERMINADAS CONDICIONES INCLUYE STYLESHEET

<!--[if lte IE 7]><link href="style-ie.css" rel="stylesheet" /><![endif]-->;

CSS para IE

.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}
Explicación: ¿De qué manera se div alineado en el centro?

La clave para el método anterior son las reglas CSS de la div medio. Muchos de ustedes deben haber intentado propiedad vertical-align para alinear verticalmente un div. Pero la mayoría de ustedes no han tenido éxito! La razón es que esta propiedad trabaja en celdas de la tabla y no en un elemento div con indicación de secuencia. La pantalla por defecto de un div es el bloque, por lo que cuando se crea un div y tratar de vertical-align que -es media no va a funcionar. Primero tendría para establecer la propiedad de presentación de la div a-celda de la tabla.

El div exterior en solución anterior también juega un papel importante. Ocupa toda el área de exploración con la anchura y la altura se ajusta al 100%. El div exterior crea un parque infantil para el div medio, así como el div media tiene toda la pantalla a sí mismo y se puede cambiar en cualquier lugar sin ningún otro elemento que viene en su camino. La propiedad de posición asegura que el div exterior flota cuando el usuario se desplaza la pantalla.

El efecto combinado de div externo y medio es que el centro verticalmente alinear el div interior. A continuación, el div interior horizontal Centro alinearse; hacer que el derecho visible div interior en el centro de la pantalla.

Espero que respondió a su pregunta. Por favor, siéntase libre de hacer preguntas. Gracias por usar TechWelkin!