Una vez me dio problemas una Web donde necesitaba precisamente esto.
Si necesitáis poner totalmente centrada una capa en el navegador, aquí tenéis el código. Eso si, debe ser una capa de tamaño fijo...
div {
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}
¡Podéis ver el artículo completo en la Web Ateneupopular.com (Tenéis enlace en la columna derecha también) si necesitáis más detalles!
Tutorial completo Ver ContenidoCódigo: Php, Sql, Css...
Centrar un Div en Pantalla
Una vez me dio problemas una Web donde necesitaba precisamente esto.
Si necesitáis poner totalmente centrada una capa en el navegador, aquí tenéis el código. Eso si, debe ser una capa de tamaño fijo...
div {
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}
¡Podéis ver el artículo completo en la Web Ateneupopular.com (Tenéis enlace en la columna derecha también) si necesitáis más detalles!
Tutorial completo Ver Contenido
Super muy buen aporte
Reportar este comentario
pero si la pantalla es mas ancha que alta...
Reportar este comentario
muy buen aporte!!! para nosotros los novatos
Reportar este comentario
Jorge si la pantalla es más ancha que alta tampoco es problema pues como ha dicho el autor del post se centra en la pantalla, pero se centra el primer pixel superior izquierdo del objeto a centrar, de ahí que haya que desplazar la mitad de su altura y anchura negativamente, es decir hay que descontarlo. El aporte del autor es claro al respecto.
Reportar este comentario
Hola muchas gracias por el aporte
Reportar este comentario
Muy buen aporte, y me funcionó.....pero, cuando quiero visualizarlo en una tablet o celular, no se vé la zona superior de la web, y es justamente por ese margin-top: -200px;
Reportar este comentario
Text
Reportar este comentario
Excelente aporte, muchas gracias!!!
Reportar este comentario
Gracias, he leido mil aportes mas complejos y no funcionaban, y me lo resuelves así de fácil...
Reportar este comentario