• Cuarzo.dev
  • Posts
  • Centrado en CSS: Vertical y Horizontal en una Sola Línea de Código

Centrado en CSS: Vertical y Horizontal en una Sola Línea de Código

Descubre cómo CSS Grid ha simplificado el centrado de elementos, haciendo que algo históricamente complicado sea ahora sorprendentemente sencillo.

Author

Kiko Palomares
October 16, 2020 • Lo lees en: 3 minutes

Centrar elementos en CSS ha sido un desafío clásico para los desarrolladores web por años. Sin embargo, con la llegada de CSS Grid, este proceso no solo se ha simplificado enormemente, sino que ahora es posible con solo una línea de código. En este tutorial, te mostraré cómo puedes centrar elementos tanto vertical como horizontalmente utilizando CSS Grid, optimizando tu flujo de trabajo y manteniendo tu código limpio y eficiente.

Preparación del Entorno

Primero, abre tu editor de código favorito; en este caso, usaremos Visual Studio Code. Crea un nuevo archivo HTML llamado index.html y uno de CSS llamado styles.css. Enlaza ambos archivos para que puedas empezar a trabajar con ellos directamente.

Estructura HTML Básica

Dentro del archivo HTML, define un contenedor div que actuará como el elemento padre, y dentro de él, otro div que será el elemento que vamos a centrar: 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar en CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box">Hola, programadores!</div>
    </div>
</body>
</html>

Estilizando con CSS

En el archivo CSS, vamos a darle estilo a nuestro contenedor y al elemento a centrar. Definirás el contenedor con un alto específico y un color de fondo para visualizar mejor el centrado: 

body, h1 {
    margin: 0;
    padding: 0;
    font-family: 'Sans-serif';
}

.container {
    display: grid;
    height: 100vh;
    background-color: aquamarine;
}

.box {
    place-items: center;
}

La Magia de CSS Grid

El verdadero truco aquí es el uso de place-items: center; en el CSS del contenedor. Esta propiedad es una forma abreviada para align-items y justify-items, que centra el contenido tanto vertical como horizontalmente en un solo paso.

Visualización y Prueba

Al abrir tu archivo HTML en un navegador, verás que el texto dentro de .box está perfectamente centrado dentro de .container. Este método es no solo sencillo sino también eficaz, garantizando que el centrado funcione independientemente del tamaño del contenido.

Conclusión

Centrar elementos en CSS ya no es la tarea ardua que solía ser. Con CSS Grid y una sola línea de código, puedes lograr un diseño limpio y profesional sin complicaciones. Este enfoque no solo ahorra tiempo sino que también mejora la legibilidad y mantenibilidad de tu código.

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!

Reply

or to participate.