Centrar imagen, texto o div verticalmente con CSS: Ejemplos y código

Aprender a centrar imagen, texto o div verticalmente puede ayudar a mejorar la apariencia de nuestras páginas web

Cuando diseñamos una página web, la forma en que se presenta el contenido es de gran importancia. A menudo, queremos incluir elementos en el centro de nuestra página principal para que se vean ordenados y presentables. Sin embargo, centrar imagen, texto o div verticalmente puede ser un verdadero desafío.

Afortunadamente, hay varios métodos sencillos para lograrlo con CSS. Aquí te presentamos algunos ejemplos de código que te ayudarán a centrar imagen, texto o div verticalmente en tus diseños web:

Método 1: Alinea el contenedor con Flexbox

Flexbox es una herramienta útil en CSS para alinear elementos. Puedes utilizar la propiedad align-items para centrar verticalmente tus imágenes, texto o div. Este método es especialmente eficaz si tienes un contenedor con tamaño fijo.

Ejemplo de código:

.container {
    display: flex;
    align-items: center;
}

Método 2: Usa Transform Translate

La propiedad Transform en CSS es muy versátil, y puede ser utilizada en combinación con Translate para posicionar tus elementos en cualquier dirección. Puedes utilizar esta propiedad para centrar un elemento verticalmente en un contenedor conocido.

Ejemplo de código:

.elemento {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Método 3: Usa Tabla y Celda

Colocar elementos dentro de una tabla y celda es otra forma efectiva de centrar imágenes, texto o div verticalmente dentro de un contenedor. Puedes usar la propiedad de vertical-align en la tabla para posicionar tus elementos en el centro.

Ejemplo de código:

.contenedor {
    display: table;
    height: 100%;
    width: 100%;
}
.celda {
    display: table-cell;
    vertical-align: middle;
    text-align: center; /* Para centrar horizontalmente */
}

Con estos métodos, puedes centrar imagen, texto o div verticalmente en tu sitio web sin sacrificar la calidad de la presentación. Asegúrate de seleccionar el método que mejor se adapte a tus necesidades y empieza a mejorar la apariencia de tus diseños web. ¡Buena suerte!

Con CSS podemos utilizar diferentes técnicas para centrar nuestros elementos de forma vertical

Cuando estamos diseñando una página web, es común que queramos darle un toque visual interesante a nuestro contenido, por ello debemos saber cómo centrar nuestras imágenes, textos o div verticalmente con CSS.

Existen varias técnicas para lograrlo. Una de las más sencillas es hacer uso de las propiedades position y transform. A continuación, te mostramos un ejemplo usando position: absolute y transform: translate:

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

En este ejemplo, .parent es el contenedor que contiene a la imagen, texto o div que queremos centrar. Simplemente establecemos su posición a relative. Luego, en la clase .child, asignamos la posición absolute, un valor de 50% para la propiedad top y un valor negativo igual a la mitad de la altura del elemento. Esta técnica puede ser aplicada a varias capas, no sólo a la imagen.

Otra opción, es utilizar la propiedad display con valor table y table-cell. En este caso, debemos crear un contenedor adicional para nuestro elemento, y luego declaramos el display como table en el contenedor padre y table-cell en el hijo:

.container {
    display: table;
    height: 100%;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

En este ejemplo, .container y .child son ambos contenedores que envuelven al elemento a centrar. Para hacerlo, simplemente definimos el valor de display como table y table-cell respectivamente. Luego, establecemos un valor de vertical-align: middle en .child.

Finalmente, otra técnica útil es hacer uso de la propiedad flexbox. Con este método, definimos un contenedor padre y aplicamos la propiedad display: flex y align-items: center:

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

En este caso, .parent es el contenedor que contiene a nuestro elemento a centrar. Al establecer display: flex, creamos un nuevo contexto de diseño y podemos aplicar varias propiedades. Al usar la propiedad align-items y luego establecer un valor de center, el hijo se centra en la vertical.

Con estas tres técnicas, podrás centrar tus imágenes, textos y divs de forma vertical con CSS y darle un toque estético interesante a tu contenido.

La técnica de Flexbox es una de las más utilizadas para centrar elementos tanto horizontal como verticalmente

FlexBox es una técnica de CSS que se ha convertido en una de las más populares para centrar elementos tanto horizontal como verticalmente en una página web. En nuestra experiencia, hemos utilizado esta técnica en diversas ocasiones y siempre ha demostrado ser altamente efectiva.

La razón principal por la cual la técnica de Flexbox es tan popular es debido a su facilidad de uso. Para centrar elementos verticalmente, simplemente necesitas establecer la propiedad display del contenedor como flex y agregar la propiedad align-items con el valor center. Para centrar elementos horizontalmente, puedes usar la propiedad justify-content con el valor center.

Veamos un ejemplo de como se haría para centrar una imagen verticalmente usando Flexbox:

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

img {
    max-width: 100%;
}

En el ejemplo anterior, definimos una clase .container para el contenedor que contendrá nuestra imagen. Luego, le asignamos las propiedades display y align-items con los valores flex y center respectivamente para centrar la imagen verticalmente. Finalmente, usamos la propiedad justify-content con el valor center para centrar la imagen horizontalmente.

En el caso de querer centrar un div que contenga texto, el proceso es prácticamente el mismo:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

.text {
    text-align: center;
}

En este ejemplo, además de agregar las propiedades display, align-items y justify-content, también le asignamos una altura (height) al contenedor para poder visualizar el centrado vertical. Además, para centrar horizontalmente el texto dentro del div, utilizamos la propiedad text-align con el valor center en la clase .text.

La técnica de Flexbox es altamente efectiva para centrar elementos tanto vertical como horizontalmente dentro de una página web. Su facilidad de uso y la posibilidad de aplicarla a diferentes tipos de elementos la hacen una de las técnicas más populares en la actualidad.

También podemos utilizar display: table con sus propiedades correspondientes para centrar elementos verticalmente

Si bien es cierto que CSS tiene varias formas para centrar elementos verticalmente, en ocasiones puede resultar más simple y efectivo emplear las propiedades de la propiedad display: table.

La ventaja de display: table es que hace que un elemento se comporte como una tabla, lo que nos permite centrar los elementos de manera muy sencilla. Para hacerlo, debemos aplicar la propiedad display: table al contenedor y añadir la propiedad display: table-cell al elemento que queremos centrar.

Veamos un ejemplo:

.container {
  display: table;

}

.elemento-central {
  display: table-cell;
  vertical-align: middle;
}

En el ejemplo anterior, aplicamos display: table al contenedor, lo que hace que se comporte como una tabla y permita centrar el elemento verticalmente. Luego, aplicamos display: table-cell al elemento que queremos centrar, lo que le permite comportarse como una celda de tabla. Para finalizar, utilizamos vertical-align: middle para centrar el elemento verticalmente.

Esta propiedad es especialmente útil cuando queremos centrar varios elementos verticalmente dentro de un mismo contenedor. En este caso, simplemente debemos aplicar display: table-cell a cada uno de los elementos que queremos centrar.

<div class="contenedor">
  <div class="elemento-central">Elemento 1</div>
  <div class="elemento-central">Elemento 2</div>
  <div class="elemento-central">Elemento 3</div>
</div>

.contenedor {
  display: table;
  height: 400px;
  width: 100%;
}

.elemento-central {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Como podemos ver en este ejemplo, aplicando display: table-cell a cada uno de los elementos, logramos centrarlos verticalmente dentro del contenedor.

El uso de display: table es una alternativa muy efectiva para centrar cualquier elemento verticalmente de manera sencilla y rápida. Con esta propiedad lograremos más control y organización en nuestro código CSS.

Otra opción es utilizar transform: translate combinado con position: absolute para centrar elementos de manera flexible

Una de las maneras más flexibles de centrar verticalmente un elemento mediante CSS es utilizando la propiedad transform: translate combinada con position: absolute. Este método resulta útil cuando conocemos las medidas exactas de un elemento, pero no de su contenedor.

Para aplicar esta solución, lo primero que debemos hacer es establecer el contenedor del elemento que queremos centrar como position: relative. Para este ejemplo, utilizaremos un div como contenedor y dentro colocaremos una imagen.

<div class="contenedor">
    <img src="ejemplo-imagen.png" />
</div>

.contenedor {
    position: relative;
    height: 300px;
}
img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

En este código, establecemos la posición del elemento imagen como absolute y la ubicamos en el centro del contenedor utilizando las propiedades top y left. Posteriormente, utilizamos la propiedad transform para desplazar la imagen en sentido opuesto a su tamaño utilizando un porcentaje del 50% tanto en el eje horizontal como vertical.

Para aplicar el mismo efecto a un bloque de texto, podemos utilizar el siguiente código:

<div class="contenedor">
    <p>Ejemplo de texto centrado verticalmente</p>
</div>

.contenedor {
    position: relative;
    height: 300px;
}
p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Este método también es aplicable a elementos con medidas dinámicas, como puede ser el caso de un botón que cambia de tamaño en distintos dispositivos. Utilizando position: absolute y transform: translate, podemos asegurarnos de que nuestro elemento se mantendrá siempre centrado verticalmente sin importar su tamaño.

Utilizar la propiedad transform: translate combinada con position: absolute es una excelente opción para centrar elementos verticalmente en CSS de manera flexible. Esta técnica se adapta fácilmente a medidas dinámicas y es aplicable a cualquier tipo de elemento, desde imágenes hasta bloques de texto o botones.