Centrar un div con CSS

¿Cómo centrar un div con CSS3 vertical y horizontalmente?

Centrar un div con CSS

¿Cómo centrar un div con CSS3 vertical y horizontalmente?

VIDEO ¿Cómo centrar un div con CSS3 vertical y horizontalmente?

Para centrar o alinear un div en el centro de una página web con CSS3 usaremos propiedades place-items y justify-content y flex, ideal para una portada web

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.

¿Cómo centrar vertical y horizontalmente una capa div?

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

Si escribimos el código css, obtendremos lo siguiente:

  1. display: flex; Trata de ocupar todo el alto de su contenedor
  2. background: peru; aplica un color al fondo
  3. place-items: center; 
  4. justify-content: center;
  5. height: 100vh; 

Código HTML y CSS para centrar un div

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CODEA | CENTRAR DIV CON CSS</title>
	<style>			
		body {
			display: flex;
            background: peru;
            place-items: center;
            justify-content: center;
            height: 100vh;
		}	
        .arequipa{
            background: white;
            border-radius: 10px;
            box-shadow: saddlebrown 0px 0px 10px;
            padding: 20px;
        }	
	</style>
</head>
<body>
	<div class="arequipa">
		<h1>Div centrado</h1>
	</div>
</body>
</html>

Cómo se observa hemos declarado una clase llamada centrado para poder usarla y aplicarla en diferentes elementos o tags html, con ello logramos reducir las líneas de código y optimizar el procesamiento y carga de la página web, es decir estamos reutilizando código.

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.

Y ¿Cómo se puede centrar con Bootstrap?

Centrar con Bootstrap un elemento es mucho más rápido claro esta si conoces las clases adecuadas que trae la librería de Bootstrap, en el siguiente link puedes ver como hacerlo: centrar con Bootstrap.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Centrar un div con CSS?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 267 veces | Publicado hace 1 año

Más códigos de programación en CSS.

Ver scripts de CSS

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en CSS

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019