Como centralizar um botão dentro de um div usando CSS

Os botões são uma necessidade para aplicativos da Web. Eles são benéficos para desencadear as diferentes funcionalidades ou executar ações importantes. No entanto, se os botões estiverem posicionados onde ninguém pode vê -los ou incomodar para clicar neles, eles são completamente inúteis. Para evitar essas coisas, podemos colocar nossos botões no centro para torná -los mais visíveis para os usuários.

Este artigo demonstrará como centralizar o elemento do botão em um div usando CSS.

Como centralizar um botão dentro de um div usando CSS?

No CSS, utilizaremos as seguintes propriedades para centralizar o botão dentro de uma div:

• Propriedade de exibição
• Propriedade da posição

Então, vamos elaborar cada um por um!

Método 1: centralize um botão dentro de div usando a propriedade CSS Display

Para controlar como um elemento HTML selecionado se comportará, o “mostrar”Propriedade é usada. Essa propriedade é útil para tornar os elementos flexíveis para defini-los em um local específico, como definir o elemento no centro, exibir propriedades com conteúdo justificado, e os itens alinhados podem ser usados.

Vamos dar um exemplo para reconhecer o funcionamento da propriedade Display para centralizar o botão dentro do elemento div.

Exemplo

Aqui, temos um botão dentro do contêiner em nossa página da web. Então, vamos posicioná -lo no centro:

Em nosso arquivo html, especificamos um botão usando o “”Tag e declarou -o dentro do“““. Agora especifique a div dentro das tags.

Html

Meu botão

No arquivo CSS, utilizaremos o “fronteira”Propriedade com o valor“sólido 1.5px”, Onde sólido é o tipo e 1.5px é a largura da fronteira. Agora, atribua uma altura apropriada para dividir usando o “altura”Propriedade como“7rem”. O "mostrar”A propriedade será usada com o valor“flex”Para tornar a parte definida flexível.

Na próxima etapa, alinharemos o botão para centralizar horizontal e verticalmente usando o valor “Centro" para o "Justify-Content" e "alinhado-itens”Propriedades.

CSS

div
Border: Solid 1.5px;
Altura: 7Rem;
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;

Salve o código e execute o arquivo HTML no seu navegador:

Como você pode ver, centralizamos com sucesso um botão dentro de um div usando propriedades CSS.

Método 2: centralize um botão dentro de div usando a propriedade CSS Position

O "posição”A propriedade é utilizada para colocar elementos HTML em uma posição específica. A combinação desta propriedade com outras propriedades CSS ajuda a alcançar os resultados desejados graciosamente.

Exemplo

No elemento div, aceitaremos o valor do “alinhamento de texto"Propriedade como"Centro”Para colocar o botão horizontalmente no centro. Para o elemento do botão, especifique o “posição”Propriedade com o valor“relativo”; Isso fará com que o elemento do botão se posicione em relação à sua posição padrão. Em seguida, vamos definir o “principal”Valor da propriedade para“40%”Para alinhar o botão no centro verticalmente.

CSS

div
Border: Solid 1.5px;
Altura: 7Rem;
Alinhamento de texto: centro;

botão
Posição: relativa;
TOP: 40%;

Saída

Explicamos os métodos mais fáceis para centralizar um botão dentro de um div usando CSS.

Conclusão

Para centralizar um botão dentro de uma div, o “mostrar" ou "posição”A propriedade será utilizada. A propriedade Display será usada com a combinação de outras propriedades, como alinhamento-itens e conteúdo justificado, para centralizar o elemento do botão. Além disso, a propriedade de posição é usada com alinhamento de texto e propriedade superior para obter o resultado desejado. Nesta redação, explicamos como centralizar um elemento de botão dentro de um div usando CSS.