Original article: How to Center an Absolute Positioned Element Vertically and Horizontally with CSS
Los elementos posicionados absolutamente se eliminan del flujo de un documento. Y, a veces, saber cómo colocar correctamente dichos elementos en el centro de la página puede resultar confuso.
Quiero decir, CSS ya es confuso. 😅
En este artículo , quiero mostrarles como centrar un elemento absoluto vertical u horizontalmente – o ambos – en un contenedor.
Código de Ejemplo
Para centrar un elemento horizontalmente:
elemento {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Para centrar un elemento verticalmente:
elemento {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
Para centrar un elemento tanto vertical como horizontalmente:
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
Pero si desea comprender cómo llegué a estas soluciones, siga leyendo para obtener mas explicaciones.
¿Cómo funcionan la posición absoluta?
Por defecto, los elementos tienen una posición static al menos que se especifique lo contrario como absolute, fixed, relative o sticky. Puede leer aquí el artículo en inglés de estilos de posición de CSS para entender la diferencia.
Usaré la siguiente interfaz de usuario para explicar como trabajan los elementos absolute :
Este es el código de la interfaz de usuario :
<div class="contenedor">
<div class="bloque-azul"></div>
<div class="bloque-verde"></div>
<div class="bloque-negro"></div>
</div>
.contenedor {
margin: 20px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.bloque-azul,
.bloque-verde,
.bloque-negro{
width: 100px;
height: 100px;
}
.bloque-azul {
background-color: blue;
}
.bloque-verde {
background-color: green;
}
.bloque-negro {
background-color: black;
}
Este contenedor tiene tres bloques: azul, verde, y negro, respectivamente. Los bloques están actualmente static, por lo que están ordenados en el DOM, de la misma manera que está en el código.
¿Qué sucede cuando al bloque verde le damos una posición absolute ?
.bloque-verde {
background-color: green;
position: absolute;
margin-left: 20px;
margin-top: 20px;
}
Ahora puedes observar que el bloque verde ha abandonado el flujo del documento. El contenedor solo aplica el display:flex a los elementos azul y negro, y el elemento verde deambula sin afectar o las otros.
Entonces, ¿qué pasaría si quisiéramos colocar este bloque verde en el centro del contenedor?
Cómo centrar elementos posicionados absolutamente
Centrar elementos posicionados estéticamente usualmente involucra márgenes automáticos, por lo que margin: auto sería suficiente, ¿verdad?
.bloque-verde {
background-color: green;
position: absolute;
margin: auto;
}
Definitivamente no es así. Un elemento absolute , pierde su flujo en el contenedor. Tal vez left: auto y right: auto funcione:
.bloque-verde {
background-color: green;
position: absolute;
left: auto;
right: auto;
}
Aún nada. En este punto, es posible que esté tentado en utilizar valores codificados:
.bloque-azul, .bloque-negro {
display: none;
}
.bloque-verde {
background-color: green;
position: absolute;
left: 190px;
top: 90px;
}
Este resultado parece perfecto (o eso parece) pero no es la mejor solución porque cuando quiera cambiar el tamaño del contenedor, tiene que cambiar los valores codificados.
Ahora, veamos cómo puedes centrar elementos en posición absoluta.
La primera parte es aplicar el position : relative al contenedor:
.contenedor {
// ...
position: relative;
}
Aplicar una posición relativa al contenedor le da un límite al elemento absoluto. Los elementos absolutos están delimitados por el padre posicionado relativamente más cercano. Pero si nada de esto existe, estará delimitado por la ventana gráfica.
A continuación, centraremos el bloque horizontalmente. Aplicando la propiedad left y right con el valor 0. Esta propiedad respectivamente especifica la distancia del borde izquierdo (del bloque) al contenedor y el borde derecho al contenedor.
.bloque-verde {
// ...
left: 0;
right: 0;
}
El left tiene más prioridad porque el contenedor muestra los elementos de izquierda a derecha.
La belleza llega con el siguiente estilo:
.bloque-verde {
// ...
margin: 0 auto;
}
Y ahora tienes un elemento absoluto centrado horizontalmente. Piense en las propiedades left y right especifican un contenedor interno para el bloque. Dentro del contenedor, los márgenes izquierdo y derecho pueden ser auto para que sean iguales y lleven el elemento al centro.
Para centrar este bloque verticalmente, puedes intuir que va de esta manera:
.bloque-verde {
// ...
top: 0;
bottom: 0;
margin: auto 0;
}
El top y bottom especifican la distancia entre los bordes superior e inferior del bloque, que parece un contenedor interior. El uso de auto crea márgenes iguales tanto para margin-top como en margin-bottom.
Al unir los dos conceptos, puedes centrar el bloque horizontal y verticalmente de esta manera:
.bloque-verde {
background-color: green;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
Con este enfoque, el elemento permanece en el centro si cambia el tamaño del contenedor.
Para terminar
Los elementos absolutos se comportan diferentes de los elementos estáticos – abandonan el flujo del documento y, por defecto, no respetan el contenedor de donde fueron declarados.
Con un elemento padre de posición relative , y un elemento con posición absolute tendrá un límite. Y con las propiedades left, right, top y bottom con el valor en 0 (especificando la distancia de el borde), y con el margen en auto, el elemento absoluto se centrara en el elemento padre.
Tenga en cuenta que esta no es la única forma de centrar un elemento posicionado absolutamente. También he visto a alguien en línea usar transform: translate... para lograr esto también. Puedes investigar sobre esto si quieres.