Rutarelativa

CSS: Centrar elementos en pantalla

(0)

29 / Enero / 2010

CSS, Tips

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

CSS: 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;
}

Ejemplo centrar elementos en pantalla en CSS

Artículos relacionados

Añadir icono dentro de un Input Publicado por KeLDroX el día 10/03/2010Guardado en CSS
La Fail Whale de Twitter completamente en CSS Publicado por sergiocius el día 28/07/2010Guardado en Anotaciones reducidas
Cargar imágenes mediante CSS Publicado por KeLDroX el día 27/01/2010Guardado en CSS, Desarrollo
Usar Google Translate con PHP y Python Publicado por sergiocius el día 28/06/2010Guardado en Desarrollo
Escribir un post en Blogger usando cUrl y PHP Publicado por sergiocius el día 23/06/2010Guardado en Blogosfera, Desarrollo

Sobre KeLDroX

288

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.

Sigue a Ruta Relativa

Trackback en CSS: Centrar elementos en pantalla

Hasta el momento el artículo CSS: Centrar elementos en pantalla no tiene Trackbacks.

Comentarios en CSS: Centrar elementos en pantalla

Hasta el momento el artículo CSS: Centrar elementos en pantalla no tiene comentarios, sé el primero en comentar en él.

Escribir comentario en CSS: Centrar elementos en pantalla

¡Tu opinión nos interesa!. Escribe tu opinión lo más clara posible para que todos podamos entenderla, evita el spam, comentarios ofensivos, etc. ya que serán eliminados. Tu opinión sera moderada antes de ser publicada, por lo que su aparición en la web puede tardar unos minutos. Si deseáis ponerse en contacto para sugerencias o críticas podéis hacerlo desde el formulario de contacto.