Centro de posição absoluta CSS
Exemplo # 1: Centro de posição absoluta horizontalmente
Faremos todos esses exemplos no código do Visual Studio. Temos que criar o arquivo HTML em nosso código do Visual Studio e começar a escrever o código. Depois de concluir o código que é fornecido na imagem, você deve salvar este arquivo com o “.Extensão do arquivo html ”, pois é um arquivo“ html ”.
Mencione o tipo de documento "HTML", pois sabemos que é um código HTML. Então, abra “” e “”. A meta é definida abaixo, que é "charset = utf-8", que permite acessar diferentes caracteres. Também vinculamos este arquivo atual ao arquivo CSS no qual fazemos algum estilo e usamos a propriedade de posição absoluta. Para descrever a associação, "Rel" está aqui; O tipo é "texto/css" e o "href" no qual passamos o nome do arquivo. Nós vinculamos o “Centerstyle.CSS ”com este arquivo atual. Agora, depois de fechar o "" vamos usar o "". Temos um título no corpo e uma classe "div" com o nome "elemento". Por fim, temos que fechar todas as tags em sequência. Primeiro, feche "div", "corpo" e depois as tags "html".
Código CSS
Aqui está o arquivo CSS. Quando você cria esse arquivo, você usa o “.Extensão do arquivo CSS ”, pois é o nosso arquivo CSS. Deve lembrar que você salvou este arquivo com o mesmo nome que você mencionou no seu arquivo html. Agora aqui, vamos estilizar esta classe de elemento usando propriedades diferentes. Lugar ".”E escreva“ elemento ”, pois é o nome da classe“ div ”. Ajustamos a "altura" e "largura" como "100px" e "200px", respectivamente. Coloque “Orange” como uma cor de fundo. E branco para a cor da fonte. Agora, vamos usar a propriedade de "posição absoluta". Defina “posição” como “absoluto”. Da “esquerda”, é “0” e da “direita”, é definido como “0”. Aqui, as margens superior e inferior são "0" e a esquerda; As margens certas são "automóveis". Essa margem automática esquerda e direita é usada, por isso leva a margem automática para dar a largura do objeto.
A saída é exibida no navegador. Pressione “Alt+ B ”no arquivo html para mostrar a saída. Também colamos a saída do código HTML e CSS acima abaixo.
Saída
Exemplo # 2: Centro de posição absoluta verticalmente
Neste exemplo, estamos usando o mesmo arquivo html que criamos no exemplo anterior. Basta mudar o cabeçalho do “Centro de Posição Absoluta horizontalmente” para “Centro de posição absoluta verticalmente”.
Aqui, definimos a cor do fundo para "roxo". Quando precisamos definir a posição absoluta centrada verticalmente, colocamos a posição para "absoluta" e aqui mencionar "TOP: 0" e "Bottom: 0". Também definimos a margem para este "automático" para "top" e "inferior". O valor "0" está definido para "Esquerda" e "Right". Você também pode verificar a saída deste exemplo, que colamos abaixo.
Saída
Nesta saída, a caixa é colocada no centro verticalmente usando a propriedade de posição absoluta. Nesta imagem, o espaço entre o texto e a caixa mostra que ela é colocada no centro na posição vertical.
Exemplo # 3: Centro de posição absoluto, horizontal e verticalmente
Em nosso terceiro exemplo, vamos definir o objeto na posição central absoluta. Aqui, o objeto é centrado na vertical e também na posição horizontal. Vamos tentar este terceiro exemplo.
Aqui, desde o início, o código é o mesmo que discutimos em nosso exemplo anterior. Acabamos de mudar o código da tag "" um pouco. Criamos uma classe de "div" usando "contêiner" como o nome da classe. Antes de fechar esta tag "div", criamos outra "classe div" e desta vez, o nome é "dados". Crie um título usando o “
”Tag e também escreva um parágrafo dentro das tags“ ”. Em seguida, use as tags de fechamento para ambas as tags "".
Código CSS
No código CSS, primeiro, abra os colchetes para o parágrafo que está escrito dentro da classe de contêineres. A "altura" deste contêiner é "60px" e a "largura" também é "60px". Aplicamos o preenchimento aqui como "10px" para que ele gere um espaço "10px" entre o conteúdo e a borda. Aqui a posição do texto é "relativa". Queremos desenhar a borda ao redor do recipiente ou caixa, por isso estamos usando a propriedade "fronteira" para isso. Definimos a largura da "borda" como "3px", o tipo de borda é "sólido" e a cor desta borda é "verde". Então, quando exibimos isso no navegador, a borda será de cor verde, sólida e também da largura de “3px”. Usamos "rosa" como cor de fundo. E selecione "Black" para a fonte. Então, a fonte ou o texto será exibido na cor "preta". Agora, aqui usamos a propriedade "Centro de Posição Absolutos" e ela definirá o objeto e indo para o centro da tela.
Saída
Exemplo # 4
Aqui, colamos o código de html abaixo para este exemplo. Usamos o código acima e criamos pequenas alterações nele. Acabamos de remover a classe de dados do parágrafo e div neste exemplo e criar outro arquivo CSS para este exemplo.
Código CSS
A "altura" do contêiner neste exemplo é "70px" e "a largura" é "300px". Use a "posição" como "absoluta". Agora, estamos desenhando a borda na qual definimos sua "largura" igual a "4px", a borda exibirá "sólido", pois o tipo dessa borda é selecionado como "sólido". A cor é "preta". Em seguida, defina a cor interna de fundo como “branca”. A cor do texto que estamos usando aqui é "preta". Agora, colocamos a propriedade de posição absoluta. Nossa margem superior é "50%" e também a mesma para a margem "esquerda". Ele define o objeto "50%" do topo e também da esquerda. Vamos usar a última propriedade, e esta é a propriedade "Transform". Transforma o objeto para trás, metade de sua largura e também da altura. Ele agirá em relação ao corpo do objeto. Ele reverterá o objeto “50%” metade reversa de sua largura e “50%” metade reversa de sua altura.
Saída
Conclusão
Neste tutorial, abordamos o conceito de centro de posição absoluta no CSS. Explicamos como centralizar o objeto vertical e horizontalmente em exemplos separados e, em seguida, fornecemos outros dois exemplos em que centralizamos o objeto, tanto vertical quanto horizontalmente ao mesmo tempo. Discutimos quatro exemplos aqui neste tutorial. Realizamos todos os exemplos e colamos as capturas de tela de saída também. Você aprenderá facilmente esse centro de posição absoluto no CSS após o estudo completo deste tutorial, e espero que seja muito útil para você quando você tentar sozinho.