¿Cómo centrar un botón con CSS?

hace 1 año · Actualizado hace 1 año

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Para centrar un botón con CSS, hay varias formas. En este artículo te explico como puedes hacerlo usando las propiedades CSS de toda la vida, flex y grid.

Índice
  1. Centrar un botón con propiedades CSS
    1. Solución 1: usando la propiedad text-align
    2. Solución 2: usando la propiedad margin
  2. Centrar el botón con flex
    1. Paso 1: Crea un contenedor para el botón y aplica la propiedad display:flex al mismo
    2. Paso 2: Agrega el botón al contenedor div
  3. Centrar el botón usando GRID
    1. Paso 1: Crea un contenedor para el botón y aplica la propiedad display:grid al mismo
    2. Paso 2: Agrega el botón al contenedor div

Centrar un botón con propiedades CSS

En este caso, hay dos posibles soluciones:

Solución 1: usando la propiedad text-align

La primera solución consiste en usar la propiedad text-align para centrar el contenido del contenedor que contiene el botón. Por ejemplo, si tienes un div que contiene el botón, puedes centrar el botón usando el siguiente código CSS:

.contenedor {
  text-align: center;
}

Este código centrará todo el contenido del div, incluyendo el botón, en el centro del contenedor.

Solución 2: usando la propiedad margin

La segunda solución consiste en usar la propiedad margin para ajustar el espacio alrededor del botón. Para centrar horizontalmente el botón, puedes establecer el margen izquierdo y derecho en auto. Por ejemplo:

.boton {
  margin: 0 auto;
}

Este código establecerá el margen superior e inferior en 0 y el margen izquierdo y derecho en auto, lo que centrará horizontalmente el botón dentro de su contenedor.

Centrar el botón con flex

Si deseas centrar el botón con flexbox, puedes seguir los siguientes pasos:

Paso 1: Crea un contenedor para el botón y aplica la propiedad display:flex al mismo

Por ejemplo, si deseas centrar el botón en una sección, puedes crear un contenedor div y aplicarle la propiedad display:flex así:

.seccion {
  display: flex;
  justify-content: center;
  align-items: center;
}

El valor de justify-content: center y align-items: center, permiten centrar el contenido horizontal y verticalmente.

Paso 2: Agrega el botón al contenedor div

Por ejemplo:

<div class="seccion">
  <button>Botón</button>
</div>

Con estos simples pasos, lograrás centrar el botón utilizando flexbox. Esto es especialmente útil cuando necesitas centrar varios elementos en un mismo contenedor y deseas evitar el uso de floats o el posicionamiento absoluto.

Centrar el botón usando GRID

Aquí te dejo los pasos para centrar un botón con grid:

Paso 1: Crea un contenedor para el botón y aplica la propiedad display:grid al mismo

Por ejemplo, si deseas centrar el botón en una sección, puedes crear un contenedor div y aplicarle la propiedad display:grid así:

.seccion {
  display: grid;
  place-items: center;
}

El valor de place-items: center permite centrar el contenido horizontal y verticalmente.

Paso 2: Agrega el botón al contenedor div

Por ejemplo:

<div class="seccion">
  <button>Botón</button>
</div>

Con estos simples pasos, lograrás centrar el botón utilizando grid. Esto es especialmente útil cuando necesitas crear una cuadrícula para ubicar varios elementos y deseas centrarlos de manera sencilla y rápida.

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir