Existen varias formas de centrar elementos en pantalla mediante CSS. Personalmente creo que la forma más óptima para centrar un elemento es el ejemplo que hoy os enseño. El elemento quedará flotando en el centro de la pantalla, de modo que añadiremos una propiedad top del 50% y una propiedad left del 50%. Una vez añadida estas dos propiedades el elemento quedará posicionado en el centro de la pantalla desde su esquina superior izquierda. Tan sólo quedará restar la mitad de su ancho por el margen derecho y la mitad de su alto por el margen superior. En la imagen de ejemplo que os he añadido se ve más claro.
Imagen de ejemplo centrar elementos en pantalla
Nuestro código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
<title>titulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="es" />
</head>
<body>
<div id="centrado"></div>
</body>
</html>Nuestro código CSS:
#centrado
{
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
background-color: #69a6e5;
}
Sobre el autor
Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas.
Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional. 178 articulos realizados por Sampedro
Articulos relacionados
-
Añadir icono dentro de un Input Publicado por Sampedro el día 10/03/2010
Guardado en CSS -
Cargar imágenes mediante CSS Publicado por Sampedro el día 27/01/2010
Guardado en CSS, Desarrollo -
Herramientas online para comprimir CSS y Javascript Publicado por Sampedro el día 15/02/2010
Guardado en Desarrollo, Tips, Web -
Cambiar plantilla HTML por defecto en NetBeans Publicado por Sampedro el día 09/02/2010
Guardado en Tips, Tutoriales -
Mockups: Realizar Wireframes fácilmente Publicado por Sampedro el día 09/02/2010
Guardado en Aplicaciones, Desarrollo, Productividad
