rutarelativa

Total de entradas publicadas: 417

CSS: Centrar elementos en pantalla

votar
CSS: Centrar elementos en pantalla

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

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

Comentarios en CSS: Centrar elementos en pantalla

Hasta el momento este artículo no tiene comentarios, sé el primero en comentar en él.

Trackback en CSS: Centrar elementos en pantalla

Hasta el momento este artículo no tiene trackback.
Escribir comentarios

Últimos comentarios
  • Avatar del usuario Sampedro
    Sampedro Viendo la casa donde vive ya te puedes echar una idea de cuanto...
  • Avatar del usuario Sergio
    Sergio ¡Que bestialidad de video!. Aquí en Ruta Relativa hemos hablado ya...
  • Avatar del usuario Sergio
    Sergio Acabo de escuchar el disco Blood & Metal y he de decir que los...
  • Avatar del usuario Alber_h
    Alber_h Hombre, viendo entre sus ventajas fiestas glamurosas, cosas...
  • Avatar del usuario Alber_h
    Alber_h Dios es buenísimo xDDD Chof!
Al azar
Lo más visto
Lo más comentado
Subir
Mod Millenium Falcon sobre la Dreamcast http://bit.ly/9rToDI
Síguenos
Sobre

Sampedro 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.

Sergio Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.