Cómo centrar un botón con css

Actualizado : 2023-09-28

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).

html

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

css

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

Importante

Con flexbox tambíen puedes centrar el botón en sentido vertical usando la propiedad align-items: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;

html

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

css

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

La propiedad text-align de css a parte de ser utilizada para centrar el texto de un elemento también puedes implementarla para poner en el centro un botón en sentido horizontal.

html

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

css

div {
  text-align: center;
}

Conocer como centrar botones en css es fundamental para mejorar el diseño de nuestras páginas web. 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.

Muchas gracias por leer y espero que este post te haya servido y consiguieras centrar los botones de tu sitio web gracias a css.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi