Cómo centrar un botón con css

Centrar elementos en una página web puede parecer sencillo, pero a menudo se presentan desafíos a la hora de lograr el efecto deseado. En este artículo aprenderás a centrar un botón utilizando CSS.

Centrar botón usando flexbox

Gracias a flexbox podemos crear diseños flexibles y adaptables. Para centrar un botón utilizando flexbox, debes establecer la propiedad display: flex;en el elemento contenedor (en este caso un div) y la propiedad justify-content: center; en el elemento hijo (en este caso el botón).

Copiarhtml
<div>
  <button>Botón centrado</button>
</div>

Copiarcss
div {
  display: flex;
  justify-content: center;
}

Usando la propiedad margin: 0 auto

Otra forma de centrar un botón es utilizando la propiedad margin.Para esto debe convertir al botón e un elemento de bloque (display: block) y aplicarle la propiedad margin: 0 auto;

Copiarhtml
<div>
  <button>Botón centrado</button>
</div>

Copiarcss
div {
  background-color: rgba(110, 165, 237, 0.686);
  height: 100px;
}

button {
  display: block;
  padding: 0.5rem 1rem;
  width: 200px;
  margin: 0 auto;
}

Usando la propiedad text-align en el contenedor

A parte de centrar el texto de un elemento también puedes utilizar la propiedad text-align para poner en el centro un botón en sentido horizontal.

Copiarhtml
<div>
  <button>Botón centrado</button>
</div>

Copiarcss
div {
  text-align: center;
}

Recuerda que es importante tener en cuenta el diseño de la página y utilizar la forma que mejor se adapte a tus necesidades.