Cómo centrar un elemento absolutamente posicionado en un div?

El posicionamiento de los elementos en HTML y CSS es crucial para estructurar los elementos de una página web. Además, el CSS "posición"La propiedad se puede utilizar para modificar las posiciones del elemento. Esta propiedad se puede usar junto con los atributos de desplazamiento, incluidas las propiedades derecha, superior, izquierda e inferior, para cambiar la posición del elemento en la página.

Esta publicación examinará el procedimiento para centrar un elemento que está absolutamente posicionado en un DIV.

Cómo centrar un elemento absolutamente posicionado en un div?

Para centrar un elemento absolutamente posicionado en un DIV, discutiremos los siguientes dos métodos:

• Método 1: Cómo centrar la imagen en relación con "Div"?

• Método 2: Cómo centrar la imagen en relación con el "cuerpo"?

Método 1: Cómo centrar la imagen en relación con "Div"?

Para centrar la imagen que es relativa al DIV, establecer una posición relativa en el contenedor le da al elemento absoluto un límite. Más específicamente, elementos que son "absoluto"Están restringidos por el parent relativo más cercano posicionado. Pero si no existe nada de eso, estarán limitados por la ventana gráfica.

Paso 1: Agregar imagen en el archivo HTML

Siga las instrucciones dadas para centrar una imagen en relación con el contenedor creado:

• En primer lugar, agregue un encabezado utilizando la etiqueta de encabezado "

  ". Entonces, usa el "estilo"Atributo entre el

  etiqueta y agregue el texto para el encabezado.

• A continuación, haz un ""Y asignar el nombre de la clase como"elemento de posición".
• Agregue una imagen usando el ""Etiqueta e inserte el"SRC"Atributo de imagen que se refiere a la URL de la imagen:

Elemento de posición absoluta

Se puede observar que una imagen se ha agregado con éxito en el contenedor DIV:

Ahora, avancemos hacia la parte CSS para centrar el elemento absolutamente posicionado en un div.

Paso 2: Estilo ".elemento de posición "

.elemento de posición
Altura: 350px;
Ancho: 350px;
margen: auto;
Posición: relativo;
borde: 4px sólido RGB (38, 17, 114);

En el código mencionado anteriormente, acceda al "elemento posicionado"Clase utilizando el"."Selector y aplique las propiedades dadas:

• "altura"La propiedad establece la altura del elemento de acceso como" 350px ".
• "ancho"La propiedad se utiliza para asignar ancho" 350px ".
• "margen"La propiedad especifica el espacio alrededor del elemento y fuera del borde definido.
• "posición"La propiedad especifica el tipo de método que se coloca y se usa para un elemento. En el ejemplo anterior, la posición se establece como "relativo"Para colocar el elemento en relación con su posición normal.
• Entonces, "borde"Se usa para definir el ancho, el estilo de línea y el color del borde alrededor del elemento.

Paso 3: Estilo ".IMG de elementos de posición "

Consulte el bloque de código dado:

.elemento de posición img
Posición: Absoluto;
transformar: traducir (-50%, -50%);
Izquierda: 50%;
arriba: 50%;

Aquí:

• "posición"Establecido como" absoluto "que se utiliza para colocar el elemento en relación con la sección del cuerpo del HTML.
• "transformar"La propiedad se utiliza para modificar el espacio de coordenadas del modelo de formato visual con el"traducir" efecto.

• "izquierda"Especifica la configuración horizontal del elemento.
• "arriba"Asigna el ajuste vertical del elemento.

Se puede observar que el elemento posicionado absoluto ha sido alineado en el centro:

Método 2: Cómo centrar la imagen en relación con el "cuerpo"?

Para centrar la imagen en relación con el cuerpo, pruebe las instrucciones dadas:

• Primero, cree un encabezado con el "

  " etiqueta.

• Entonces, agregue un ""Etiqueta e inserte el"identificación"Atributo dentro de la etiqueta de imagen. Después de eso, el "SRC"El atributo es para especificar la ruta de la imagen:

Elemento de posición absoluta

Estilo "#Position-Image"

#POSICIÓN-IMG
Posición: Absoluto;
Izquierda: 50%;
Transform: traduceX (-50%);

Acceda a la identificación "Posición-IMG"Al usar el"#"Selector y también aplicar"posición","izquierda", y "transformar" propiedades.

Producción

Hemos compilado los métodos para centrar el elemento en un DIV con una posición absoluta.

Conclusión

El CSS "posición"La propiedad se utiliza para centrar un elemento que está absolutamente posicionado. Su valor se establece como "absoluto"Para colocar el elemento en relación con su elemento principal, que actualmente se coloca cerca. Además, también puede utilizar varias propiedades junto con la propiedad de posición, como ","izquierda", y "transformar"Para centrar el elemento. Este tutorial demostró los procedimientos para centrar el elemento en un DIV con la posición absoluta.