Centrar un div con CSS horizontalmente

Cómo centrar un div horizontalmente con CSS en una página web HTML

Publicado en CSS 2018-03-06 03:05:20

Centrar un div con CSS horizontalmente

CSS que posiciona un div al medio de una web

CSS Diseño Web HTML

Resumen: Alinear un div en el centro de una página web usando CSS de forma automática, para ello declaramos una clase con la propiedad margin y el valor 0 auto.

Cuando empezamos a aprender maquetación HTML y CSS, al inicio nos abruma la cantidad de etiquetas, atributos, y propiedades que tenemos a nuestra disposición para crear contenido web. pero en realidad es sencillo muy sencillo.

Normalmente  en el diseño de una página web creamos un div como contenedor de toda la parte visual del documento HTML  y por  una cuestión de diseño  necesitamos centrar el div horizontalmente. Pues podemos hacerlo usando CSS

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>APPTIVA WEB | Programación Web</title>
	<style>			
		.apptivaweb {
			width: 1024px;		/* Ancho*/
			margin: 0 auto;   	/* contenedor centrado */
			color: white; 		/* texto con color blanco */
			text-align: center;	/* texto centrado*/		    
		    background: black; 	/* color de fondo  (#ffffff) */
		    padding: 50px;		/* espacio entre el contenido y el div*/
		}		
	</style>
</head>
<body>
	<div class="apptivaweb">
		<h1>Div centrado</h1>
	</div>
</body>
</html>

Existen otras alternativas para obtener este efecto, que igualmente pueden ser opciones válidas en función de las circunstancias. Hemos elegido esta porque nos han parecido las más sencillas de implementar en cuanto a código, equilibradas con la compatibilidad que ofrecen los navegadores web.

Centrar un div con CSS horizontalmente

Redacción:| Artículo leído: 269 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de CSS