En este artículo, sabremos cómo centrar el elemento absolutamente posicionado usando la etiqueta <div> en CSS, y entenderemos su implementación a través de los ejemplos. A veces necesitamos colocar un elemento en el centro con una posición absoluta, en relación con su ancestro posicionado más cercano en HTML para que se vea más presentable. Para centrar un elemento de posición absoluta en div usamos los siguientes ejemplos.
Ejemplo 1: Este ejemplo demuestra el centrado de un elemento de posición absoluta usando la etiqueta <div>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#content {
position: absolute;
left: 50%;
transform: translateX(-50%)
}
</style>
</head>
<body>
<div id="content">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
</body>
</html>
Salida: Aquí, a la izquierda se le da el 50% para colocarla en el centro horizontal. Transform se usa para retirar el elemento con la mitad de su ancho para colocarlo exactamente en el centro desde la mitad del elemento. izquierda: el 50 % es relativo al elemento principal, mientras que la transformación de traducción es relativa al ancho/alto de los elementos.
Ejemplo 2: Este ejemplo demuestra el centrado del elemento absolutamente posicionado en las direcciones horizontal y vertical en la etiqueta <div>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.content {
height: 400px;
position: relative;
border: 4px solid green;
}
.content img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p>
Centering an absolute positioned
element inside a div both horizontally
and vertically
</p>
<div class="content">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
</body>
</html>
Salida: Aquí a la izquierda ya la parte de arriba se le da el 50% para colocarla en el centro en horizontal y en vertical. Transform se usa para retirar el elemento con la mitad de su ancho para colocarlo exactamente en el centro desde la mitad del elemento. Por lo tanto transform: translate recibe -50% tanto para horizontal como para vertical para ajustarlo centralmente.
