CSS se utiliza principalmente para proporcionar el mejor estilo a la página web HTML. Usando CSS, podemos especificar la disposición de los elementos en la página.

Existen varios métodos para alinear el botón en el centro de la página web. Podemos alinear los botones tanto horizontal como verticalmente. Podemos centrar el botón utilizando los siguientes métodos:

alineación de texto: centro- Estableciendo el valor de la propiedad de alineación de texto de la etiqueta div principal en el centro.margen: automático- Estableciendo el valor de la propiedad de margen en automático.pantalla: flexible- Al establecer el valor de la propiedad de visualización en flex y el valor de justificar-contenido propiedad a centro .pantalla: cuadrícula- Estableciendo el valor de la propiedad de visualización en la cuadrícula.

Entendamos los métodos anteriores usando algunas ilustraciones.

Ejemplo

En este ejemplo, estamos usando el texto alineado propiedad y establecer su valor en el centro . Se puede colocar en una etiqueta del cuerpo o en la etiqueta div principal del elemento.

Aquí colocamos el alineación de texto: centro; en la etiqueta div principal del elemento del botón.

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

Producción

Ejemplo

En este ejemplo, estamos usando el pantalla: cuadrícula; propiedad, y margen: coche; propiedad. Aquí colocamos el pantalla: cuadrícula; en la etiqueta div principal del elemento del botón.

huevos de pascua en android

El botón se ubicará en el centro de las posiciones horizontal y 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> 

Producción

Ejemplo

Es otro ejemplo de cómo colocar el botón en el centro. En este ejemplo, estamos usando el pantalla: flexible; propiedad, justificar-contenido: centro; propiedad, y alinear elementos: centro; propiedad.

Este ejemplo nos ayudará a colocar el botón en el centro de las posiciones horizontal y 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 

Producción