Centrar una div verticalmente usando CSS

1. Utilice las propiedades top y transform en el div interior para centrar verticalmente el div usando CSS
2. Utilice CSS Flexbox para centrar verticalmente el div en CSS

Este artículo presentará métodos para centrar un div en CSS verticalmente.

Utilice las propiedades top y transform en el div interior para centrar verticalmente el div usando CSS

Este método utiliza dos contenedores para demostrar cómo centrar un div verticalmente.

Primero, podemos crear un div exterior e interior donde centraremos el div interior verticalmente con respecto al div exterior. Podemos usar las propiedades de CSS transform y top para centrar el div interior verticalmente.

La propiedad top solo establece la posición vertical de los elementos posicionados. La propiedad exhibe un comportamiento diferente según la propiedad de posición aplicada a los elementos.

Por ejemplo, si position se establece en relative, el borde superior del elemento se moverá hacia abajo o hacia arriba desde su posición normal. La propiedad transform toma una variedad de valores y translateY() es el que usaremos.

La función translateY() traducirá el elemento solo desde el eje Y. Podemos centrar verticalmente un div usando estas dos propiedades.

Por ejemplo, cree un elemento div y envuélvalo con otro elemento div en HTML. En CSS, seleccione el div exterior y establece el height, width y background-color a 180px, 300px y blue.

A continuación, seleccione el div interior y establezca la propiedad position en relative. Luego, aplique red como la propiedad background-color y dé 20px de altura al div y utilice translateY(-50%) como el valor de la propiedad transform.

En el siguiente ejemplo, el valor 50% de la propiedad top colocará el borde superior del div interior en la sección media vertical del div exterior. Sin embargo, el div interior no está centrado porque tiene la height de 20px.

El valor de translateY(-50%) moverá el borde superior con el 50% de su altura hacia arriba. Se moverá hacia arriba debido al valor negativo, lo que significa que el div se moverá 10px hacia arriba. De esta forma, el div interior está centrado verticalmente.

Código de ejemplo:

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

Utilice CSS Flexbox para centrar verticalmente el div en CSS

Podemos crear un contenedor flexible y usar las propiedades justify-content y align-items para centrar verticalmente el div en CSS. Podemos usar la propiedad display para definir el contenedor como un flexbox.

La propiedad justify-content alineará horizontalmente los elementos en el flexbox. Toma varias opciones como flex-start, flex-end, center, etc.

De manera similar, la propiedad align-items colocará verticalmente los elementos dentro del flexbox.

Por ejemplo, cree un div con la clase box y cree otro div dentro de él. Escribe un texto dentro del div interior.

Seleccione las etiquetas body y html en CSS y establezca la altura en 100%. A continuación, seleccione la clase box y establezca su height en 100%.

Establezca background en red y la propiedad display en flex. Por último, establezca el valor center en las propiedades justify-content y align-items.

El siguiente ejemplo centrará el texto tanto vertical como horizontalmente dentro del div. Podemos usar estas dos propiedades solo dentro de un contenedor flexible.

Por lo tanto, podemos centrar un div usando flexbox.

Código de ejemplo:

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}