alineación vertical y horizontal (centro y centro) con css

Estoy practicando CSS y estoy tan confundido, ¿cómo puedo forzar mi elemento div a ser el centro (vertical y horizontal) en mi página (¿qué camino o formas de compatibilidad con navegador cruzado)?

Atentamente !

Hay muchos métodos:

  1. Centrar alineación horizontal y vertical de un elemento con medida fija

CSS

  

2. Centrar horizontal y verticalmente una sola línea de texto

CSS

 

3. Centrar alineación horizontal y vertical de un elemento sin medida específica

CSS

 

Más aquí: Alineación horizontal y vertical en CSS

Esta publicación de blog describe dos métodos para centrar un div horizontal y verticalmente. Uno usa solo CSS y trabajará con divs que tienen un tamaño fijo; el otro usa jQuery y trabajará divs para los que no conoce el tamaño por adelantado.

He duplicado los ejemplos de CSS y jQuery de la demostración de la publicación de blog aquí:

CSS

Suponiendo que tiene un div con una clase de .classname, el css a continuación debería funcionar.

La left:50%; top:50%; left:50%; top:50%; establece la esquina superior izquierda del div en el centro de la pantalla; el margin:-75px 0 0 -135px; lo mueve hacia la izquierda y hacia arriba a la mitad del ancho y la altura de la división de tamaño fijo, respectivamente.

 .className{ width:270px; height:150px; position:absolute; left:50%; top:50%; margin:-75px 0 0 -135px; } 

jQuery

 $(document).ready(function(){ $(window).resize(function(){ $('.className').css({ position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2, top: ($(window).height() - $('.className').outerHeight())/2 }); }); // To initially run the function: $(window).resize(); }); 

Aquí hay una demostración de las técnicas en práctica .

Este sitio ofrece algunas opciones para centrar verticalmente su div: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Esto no es tan fácil de hacer como cabría esperar, solo puedes hacer una alineación vertical si conoces la altura de tu contenedor. Si este es el caso, puede hacerlo con un posicionamiento absoluto.

El concepto es establecer las posiciones superior / izquierda al 50% y luego usar márgenes negativos (establecer a la mitad de la altura / ancho) para volver a colocar el contenedor en el centro.

Ejemplo: http://jsbin.com/ipawe/edit

CSS básico:

 #mydiv { position: absolute; top: 50%; left: 50%; height: 400px; width: 700px; margin-top: -200px; /* -(1/2 height) */ margin-left: -350px; /* -(1/2 width) */ } 

Ahora hay una mejor solución: alinear verticalmente cualquier cosa con solo 3 líneas de CSS