Una duda muy común cuando se empieza a programar páginas web es cómo centrar los elementos en pantalla. En el artículo de hoy te explicamos cómo centrar dos botones HTML con CSS. Aprende a centrar el contenido y lleva tus diseños al mundo web.
Índice de Contenidos
Flexbox: imprescindible para centrar botones con CSS
Cuando nos enfrentamos a un código HTML en pantalla, siempre necesitamos de las hojas de estilo CSS para que el diseño que tenemos planteado pueda hacerse realidad. En este caso, una vez hemos creado dos botones en HTML, abriremos nuestra hoja de estilos y tendremos que utilizar el modelo de diseño de cajas en CSS: Flexbox.
Flexbox, también conocido como «Flexible Box Layout», sirve para organizar los elementos HTML en una sola dirección, ya sea horizontal o vertical. Además, se pueden ajustar su tamaño, orden y alineación según las necesidades del diseño, permitiendo a los desarrolladores web crear diseños flexibles y responsivos de manera muy sencilla.
Las propiedades de Flexbox permiten que los elementos se ajusten automáticamente y de forma flexible dentro de un contenedor, por lo que es muy fácil conseguir centrar elementos tanto vertical como horizontalmente.
Centrar horizontalmente los botones HTML
La propiedad de Flexbox «justify-content» se encarga de alinear los elementos horizontalmente dentro del contenedor. A continuación, te mostramos un ejemplo sencillo utilizando Flexbox para centrar horizontalmente dos botones HTML:
Tendremos que crear un contenedor (nosotros le hemos dado la clase «contenedor») que contenga los dos botones en HTML:
<div class="contenedor">
<button>Botón 1</button>
<button>Botón 2</button>
</div>
Una vez creados los dos botones, le aplicaremos lo siguiente a la hoja de estilos CSS:
.contenedor {
display: flex;
justify-content: center;
}
Como vemos en este ejemplo, lo primero será indicar que el contenedor en el que queremos alinear nuestros botones tiene la propiedad «display: flex». De esta manera estaremos indicando que el contenedor tendrá modelo de caja Flexbox. Una vez declarada esta propiedad, utilizaremos «justify-content: center» para centrar los dos botones dentro del contenedor de forma horizontal.
Alinear verticalmente los botones con CSS
Centrar verticalmente dos botones con CSS utilizando Flexbox es casi igual de sencillo que hacerlo horizontalmente. Para ello, se utiliza la propiedad «align-items: center». Sin embargo, hay un pequeño dato más que tendremos que añadir. Ya que, si lo comprobáis en vuestro código, si únicamente declaramos esta propiedad y la de «display: flex» en nuestra hoja de estilos, no obtendremos el resultado que estamos buscando, es decir, los botones no se centrarán verticalmente en nuestra pantalla.
Esto sucede, porque para conseguir el resultado que necesitamos, tenemos antes que definir la altura de la que dispone nuestro contenedor para poder alinear los elementos que haya en su interior. Es decir, únicamente funcionará esta propiedad si especificamos la propiedad «height» en nuestro CSS, de la siguiente manera:
Documento HTML:
<div class="contenedor">
<button>Botón 1</button>
<button>Botón 2</button>
</div>
Hoja de estilos CSS:
.contenedor {
display: flex;
align-items: center;
height: 100vh;
}
Definir la altura en CSS para alinear verticalmente
En este caso, hemos indicado una altura del 100vh al contenedor, la unidad de medida «vh» en CSS significa «viewport height» (altura de la ventana gráfica) y es el área visible del sitio web en el navegador.
Lo bueno de esta medida, en comparación con medidas fijas (como los píxeles) es que varía según el tamaño de la pantalla desde la que se esté visualizando la web. Es decir, tanto si el usuario accede desde un ordenador como si accede desde su dispositivo móvil o tablet, siempre verá el contenido alineado verticalmente en la mitad de la pantalla.
Esta será la unidad de medida más óptima si el resultado que buscamos es alinear nuestros botones en el centro de la pantalla. Sin embargo, si queremos que estén alineados dentro de un contenido de menor altura, podremos aplicar cualquier medida y la propiedad «align-items: center» alineará los botones en el centro del contenedor que hemos creado.
No definir la altura en CSS para centrar horizontalmente
Analizando, lo que acabamos de ver sobre la necesidad de definir la altura del contenedor para alinear los elementos de su interior con Flexbox, puede surgir la duda de por qué no es necesario hacer lo mismo para centrar los elementos horizontalmente. Ya que, como hemos visto, con la propiedad «justify-content: center» el contenido se alinea horizontalmente automáticamente, y no hace falta que indiquemos que el contenedor mide 100vw (viewport width, ancho de la pantalla).
Esto se debe a que los elementos que contenga un contendor al que se le haya aplicado la propiedad «display: flex», ocuparán por defecto el 100% del ancho de la pantalla, a menos que se haya especificado una medida anteriormente al contenedor.
Por lo que únicamente tendremos que indicar la medida de la altura del contenedor para alinear nuestros botones verticalmente.
Alinear vertical y horizontalmente los botones con CSS
Una vez hemos visto cómo centrar tanto vertical como horizontalmente dos botones, podríamos unir todo lo aprendido para posicionar nuestro contenido en el centro de la pantalla en ambos ejes.
Volveremos a utilizar el mismo HTML que en los dos casos anteriores, y simplemente combinaremos la propiedad «justify-content: center» con la de «align-items: center» y conseguiremos que nuestros botones estén totalmente centrados en pantalla:
.contenedor {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Conclusión
Esperamos que gracias a este artículo puedas centrar tus elementos en pantalla sin ningún problema. El mundo Flexbox ofrece muchas posibilidades y facilidades, por lo que es imprescindible conocerlas para conseguir llevar tus diseños web a la vida.
Si quieres seguir aprendiendo sobre el mundo Flexbox y poder llevar los diseños de tus sitios web a otro nivel, te esperamos en las siguientes entradas de blog.
¡Hasta la próxima!
