CSS é usado principalmente para fornecer o melhor estilo à página HTML. Usando CSS, podemos especificar a disposição dos elementos na página.

Existem vários métodos para alinhar o botão no centro da página da web. Podemos alinhar os botões horizontalmente e verticalmente. Podemos centralizar o botão usando os seguintes métodos:

alinhamento de texto: centro- Definindo o valor da propriedade text-align da tag div pai para o centro.margem: automático- Definindo o valor da propriedade margin como automático.exibição: flexível- Ao definir o valor da propriedade display como flex e o valor de justificar-conteúdo propriedade para Centro .exibição: grade- Definindo o valor da propriedade display para a grade.

Vamos entender os métodos acima usando algumas ilustrações.

Exemplo

Neste exemplo, estamos usando o alinhamento de texto propriedade e defina seu valor para o Centro . Ele pode ser colocado em uma tag body ou na tag div pai do elemento.

Aqui, colocamos o alinhamento de texto: centro; na tag div pai do elemento botão.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

Saída

Exemplo

Neste exemplo, estamos usando o exibição: grade; propriedade, e margem: automático; propriedade. Aqui, colocamos o exibição: grade; na tag div pai do elemento botão.

removendo da arraylist

O botão será colocado no centro das posições horizontal e vertical.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

Saída

Exemplo

É outro exemplo de colocação do botão no centro. Neste exemplo, estamos usando o exibição: flexível; propriedade, justificar-conteúdo: centro; propriedade, e alinhar itens: centro; propriedade.

Este exemplo nos ajudará a colocar o botão no centro das posições horizontal e vertical.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

Saída