Centrar contenido vertical y horizontalmente con CSS

A la hora de centrar un elemento con CSS de forma vertical y horizontalmente con respecto a su contenedor padre tenemos diferentes formas de conseguirlo y utilizar una opción u otra dependerá del objetivo que tengamos ya que todas son válidas y correctas dependiendo de su uso.

En cuanto a la estructura del documento necesitaremos un elemento contenedor que incluirá los elementos que irán centrados.

HTML

				
					<div class="contenedor">
    <div class="elemento"></div>
</div>

				
			

CSS

Con Grid Layout

				
					.contenedor{
	display: grid
}

.elemento{
	align-self: center; 
    justify-self: center;
}

				
			

Con Flex Layout

Opción 1

Esta es mi opción preferida ya que no hace falta referirnos a los elementos contenidos. Solamente necesitamos indicarle al contenedor padre cómo han de comportarse sus hijos.

				
					.contenedor{
    display: flex; 
    justify-content: center;
    align-items: center;
}
				
			

Opción 2

				
					.contenedor{
    display: flex; 
}
.elemento{
    margin: auto;
}

				
			

Con Position

Hay personas que lo ven como una opción sucia o vieja para esta tarea pero lo cierto es que si necesitamos trabajar con superposición de capas sigue siendo útil.

				
					.contenedor{
	position:relative
}
.elemento{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
				
			
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Share on twitter
Share on linkedin

Nuevas/ publicaciones

Nuevas/ publicaciones

📢 Paginación con scroll infinito en Posts de Elementor 🔗 https://martagonzalez.dev/blog/paginacion-con-scroll-infinito-en-posts-de-elementor/ #webdev #playground #code #frontend #dev #webdev #developerlife #wordpress #elementor #cms #codingdays #development #frontenddev
Diseño tarjeta de visita #taxi #taxidriver #barcelona #tarjetadepresentacion #printdesign #taxibarcelona #graphicdesign #design #visitbarcelona #diseñografico #businesscards #branding #brandidentity
Move By Bike Landing - 2022 - Proyecto experimental Desarrollo de una landing page para promover el uso de la bicicleta como medio de transporte mediante una aplicación de pagina única hecha con #Angular y estilada con #SCSS. El diseño es de #Freepik. 🔗https://martagonzalez.dev/playground/by-bike-landing/ #webdev #playground #code #bybike #landing #frontend #developerlife #coding #angulardeveloper #codingdays #development #frontenddev #womenwhocode #tech #webdeveloper #codinglife
Hola mundo! 👋 Soy Marta González y me dedico al desarrollo front-end. Tengo estudios de multimedia, administración de sistemas y desarrollo de aplicaciones informáticas. Trabajo asiduamente con lenguajes #HTML5, #CSS3 y #JavaScript.  Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos rápidamente. #webdev #code #frontend #aboutme #developerlife #codingdays #development #programmer #womeninstem #frontenddev #webdeveloper #developer #code #techcommunity #devgirls #womenwhocode #coding #codepeople #womwnintech
Aplicación #CRUD de notas y registro de usuarios con #NodeJS #MongoDB #webdev #code #developer #playground #developerslife #codeislife #tech #codingdays #development
Pet Shop Landing - 2021 - Experimental #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #developerlife #tech #development #adoptdontshop #coding
📢 Aplicaciones de página única (SPA) 🔗 https://martagonzalez.dev/aplicaciones-de-pagina-unica-spa/ #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #spa #angular #react #vue #nodejs #javascript
To-Do con #ReactJS - 2021 #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev