# Centrar contenido vertical y horizontalmente con CSS

> Aprende a centrar contenido vertical y horizontalmente con CSS. Descubre diferentes métodos y elige el mejor para tu diseño.

- URL canónica: https://www.martagonzalez.dev/blog/centrar-contenido-vertical-y-horizontalmente-con-css/
- Fecha de publicación: 2022-03-18T18:39:53
- Última actualización: 2026-05-28T19:30:42

---

![Centrar contenido vertical y horizontalmente con CSS](https://martagonzalez.dev/wp/wp-content/uploads/2022/03/centrar-contenido-vertical-y-horizontalmente-con-css.avif)
 

 
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
 
## 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%);
}