Como centralizar um elemento absolutamente posicionado em uma div?

O posicionamento dos elementos em HTML e CSS é crucial para estruturar os elementos de uma página da web. Além disso, o CSS “posição”A propriedade pode ser utilizada para modificar as posições do elemento. Esta propriedade pode ser usada em conjunto com os atributos de deslocamento, incluindo propriedades direito, superior, esquerdo e inferior, para alterar a posição do elemento na página.

Este post examinará o procedimento para centralizar um elemento que está absolutamente posicionado em uma div.

Como centralizar um elemento absolutamente posicionado em uma div?

Para centrar um elemento absolutamente posicionado em uma div, discutiremos os dois métodos a seguir:

• Método 1: Como centralizar a imagem em relação a "div"?

• Método 2: Como centralizar a imagem em relação ao "corpo"?

Método 1: Como centralizar a imagem em relação a "div"?

Para centralizar a imagem que é relativa à div, definir uma posição relativa ao contêiner fornece ao elemento absoluto um limite. Mais especificamente, elementos que são “absoluto”São restringidos pelo pai relativo mais próximo posicionado. Mas se nada disso existir, eles serão delimitados pela visualização.

Etapa 1: Adicionar imagem no arquivo HTML

Siga as instruções fornecidas para centralizar uma imagem relativa ao contêiner criado:

• Primeiro de tudo, adicione um título utilizando a tag de título “

  ”. Então, use o “estilo”Atributo entre o

  Marque e adicione o texto para o cabeçalho.

• Em seguida, faça um “”E aloque o nome da classe como“elemento de posição”.
• Adicione uma imagem usando o “”Tag e insira o“src”Atributo da imagem que se refere ao URL da imagem:

Elemento da posição absoluta

Pode -se observar que uma imagem foi adicionada com sucesso no contêiner Div:

Agora, vamos em direção à parte do CSS para centralizar o elemento absolutamente posicionado em uma div.

Etapa 2: estilo “.elemento de posição ”

.elemento de posição
Altura: 350px;
Largura: 350px;
margem: automático;
Posição: relativa;
borda: 4px RGB sólido (38, 17, 114);

No código acima mencionado, acesse o “elemento posicionado”Classe utilizando a“.”Seletor e aplique as propriedades fornecidas:

• ““altura”Propriedade define a altura do elemento de acesso como“ 350px ”.
• ““largura”A propriedade é utilizada para alocar a largura“ 350px ”.
• ““margem”Propriedade especifica o espaço ao redor do elemento e fora da borda definida.
• ““posição”Propriedade especifica o tipo de método que está posicionado e usado para um elemento. No exemplo acima, a posição é definida como “relativo”Para posicionar o elemento em relação à sua posição normal.
• Então, "fronteira”É usado para definir a largura, o estilo de linha e a cor da borda ao redor do elemento.

Etapa 3: estilo “.IMG de elementos de posição ”

Confira o bloco de código fornecido:

.IMG de elementos de posição
Posição: Absoluto;
Transformar: traduzir (-50%, -50%);
Esquerda: 50%;
TOP: 50%;

Aqui:

• ““posição”Definido como“ absoluto ”que é utilizado para colocar o elemento em relação à seção corporal do HTML.
• ““transformar”A propriedade é utilizada para modificar o espaço de coordenadas do modelo de formatação visual com o“traduzir”Efeito.

• ““esquerda”Especifica a configuração horizontal do elemento.
• ““principal”Aloca o ajuste vertical do elemento.

Pode -se observar que o elemento posicionado absoluto foi alinhado no centro:

Método 2: Como centralizar a imagem em relação ao "corpo"?

Para centralizar a imagem em relação ao corpo, tente as instruções fornecidas:

• Primeiro, crie um título com o “

  " marcação.

• Então, adicione um “”Tag e insira o“eu ia”Atributo dentro da tag de imagem. Depois disso, o “src”O atributo é para especificar o caminho da imagem:

Elemento da posição absoluta

Estilo “#position-imagem”

#position-img
Posição: Absoluto;
Esquerda: 50%;
Transform: translatex (-50%);

Acesse o ID “Posição-IMG”Usando o“#"Seletor e da mesma forma, aplique"posição","esquerda", e "transformar”Propriedades.

Saída

Nós compilamos os métodos para centralizar o elemento em uma div com uma posição absoluta.

Conclusão

O CSS “posição”A propriedade é utilizada para centrar um elemento que está absolutamente posicionado. Seu valor é definido como “absoluto”Para colocar o elemento em relação ao seu elemento pai, que está atualmente posicionado nas proximidades. Além disso, você também pode utilizar várias propriedades junto com a propriedade de posição, como, “esquerda", e "transformar”Para centralizar o elemento. Este tutorial demonstrou os procedimentos para centralizar o elemento em uma div com a posição absoluta.