Hace algún tiempo tuve la necesidad de centrar el diseño de una pagina web horizontal y verticalmente, al principio fue bastante darle una solución hasta que encontre la información necesaria.
Para empezar en nuestro HTML debemos colocar el objeto a centrar dentro de un div con id=”contenido” y en nuestra hoja de estilos darle los siguientes atributos a nuestro div
#contenido{
margin-top: -175px; /* la mitad del alto del objeto a centrat */
margin-left: -250px; /* la mitad del ancho del objeto a centrar */
position: absolute;
top: 50%;
left: 50%;
width: 500px; /* ancho del objeto a centrar */
height: 350px; /* alto del objeto a centrar */
}
Con esto nuestro contenido ya se encontrará centrado en forma vertical y horizontal.
Hola Henry,
Esta solución es no sólo la más elegante sino la más efectiva de todas las que figuran en la web. Totalmente compatible en todos los navegadores modernos.
Muchas gracias.
Un saludo,
Pablo.
No funciona si se redimenciona la ventana.
Funciona perfectamente, incluso cuando se redimensiona la pantalla.
Fekicitaciones
mi mala memoria y la cantidad de cosas que uno hace todo el tiempo haga que me olvide de estos detalles. La verdad, la mejor solución lejos, si queres agregale un
html { overflow: hidden}
para que no se vean las barras de scroll y 10 puntos.
mis felicitaciones
Genial solución, me ha servido de mucho, gracias Henry.
simplemente lo mejor que hay para solucionarlo
Excelente solución, muchas gracias!
Tengo una lista de links que enlazan a desocultar la capa centrada (un mapa). Si el link esta por debajo del largo de la pantalla, no veo el mapa, ya que sale centrado al top de la pagina, sin tener en cuenta el scroll que he realizado.
Alguna solucion para que centre respecto a la porcion de la pagina que se esta viendo.
algun ejemplo?
Te dedico mi tiempo para agradecerte esto. Realmente efectivo, limpio, sencillo.
Gracias por compartirlo.
Gracias por compartir esta info es de mucha ayuda pero tengo una duda haber si alguien me puede ayudar, resulta que tengo una web que necesito centrar todo el contenido pero cuando trato de centrarlo se me distorsionan otras propiedades, no me doy cuenta cual es mi error, recien estoy comenzando con css y me gustaria que alguien me diera una mano.. Desde ya muchas gracias
Hola Emilia, si tuvieras un Link donde poder ver lo que mencionas sería de gran ayuda para poder ayudarte.
Saludos.
Funciona espectacular, muchas gracias!!!