Centrar un div horizontal y verticalmente

Centrar un div horizontalmente es relativamente sencillo, pero para hacerlo verticalmente, la cosa se complica. Debemos realizar unos cálculos previos que nos permitan el centrado del div.

Partiremos de un div de 200px de ancho y 150px de alto si escribimos el código html, obtendremos lo siguiente:

A continuación, posicionaremos de forma absoluta el div, asignando un valor del 50% tanto en la propiedad top como en la left. Así la esquina superior izquierda quedará posicionada en el centro de la ventana del navegador.

Finalmente deberemos desplazar con las propiedades marging-top y marging-left la mitad de pixels del tamaño total del div, para que el centro del div coincida con el centro de la página

Finalmente el div quedará posicionado en el centro de la página.

El código final necesario es el siguiente:

<html>
<head>
<title>Div Centrado Vertical y Horizontalmente</title>
<style type="text/css">
div {
	background-color: #ccc;
	position: absolute;
	height: 150px;
	width: 200px;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -150px;
}
</style>
</head><body>
<div>Ejemplo centrado div - todohosting.es</div>
</body>
</html>
Facebooktwittergoogle_plus