Centrar cosas en CSS

Muchas veces noté que a las personas les resulta muy difícil alinear el contenido al centro, ya sea vertical u horizontalmente usando CSS ?.
Así que decidí escribir algunas formas de alinear el contenido al centro usando CSS ?.

Centrar texto en CSS.

Entonces, comencemos con el fácil alinear texto al centro de la pantalla. Para hacer eso, simplemente usa el estilo text-align:center en la etiqueta específica que deseas alinear el texto al centro.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <body>

    <h1 style="text-align: center;">? is center aligned</h1>
    <p>? still in left</p>

    </body>
</html>

Alinear el contenido al centro

Ahora entremos en cosas un poco complicadas. Alinear un div o cualquier contenido al centro.

Entonces, el truco es usar margin:auto y dar un ancho específico al div.

Esto devolverá el div alineado al centro horizontalmente con el elemento principal.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .box{
            height:25rem;
            background-color: blueviolet;
            width: 25rem;
            margin: auto;
        }
    </style>
    <body>
            <div class="box"></div>
    </body>
</html>

Para alinear una imagen al centro para una etiqueta img, solo necesitas agregar una propiedad CSS más que sea display:block.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .imgCenter{
            display: block;
            background-color: blueviolet;
            margin: auto;
        }
    </style>
    <body>
            <img class="imgCenter" src="https://i.chzbgr.com/full/7588073728/h78549C5D/not-sure-if-i-hate-css-or-i-hate-designers"/>
    </body>
</html>

Supongamos que deseas alinear div tanto vertical como horizontalmente con el centro del elemento principal, entonces puedes hacerlo con el siguiente código.

<!DOCTYPE html>
<html>
<head>
<style>
.centerBox {
  margin: 0;
  position: absolute;
  background-color: blue;
  height:15rem;
  width:15rem;
  top: 50%;
  left:50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
  <div class="centerBox"></div>
</body>
</html>

Usando flex para alinear el contenido al centro

Una forma aún mejor de alinear el contenido al centro es usando las propiedades flex.

Supongamos que deseas alinear div horizontalmente con el centro del elemento principal. Luego, debes aplicar las propiedades display: flex; align-items: center; justify-content: center; al elemento principal.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }

    </style>
    <body>
          <div class="container">
              <div class="box"></div>
          </div>  
    </body>
</html>

Supongamos que deseas alinear vertical y horizontalmente div con el centro del elemento principal, entonces necesitas agregar el siguiente estilo html y etiquetar body.

html, body { height: 100%; } y dar algo de altura al elemento principal.

Eso es todo, el contenido debe estar alineado vertical y horizontalmente con el elemento principal.

El siguiente fragmento muestra cómo se puede alinear un div con el centro.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        html, body {
            height: 100%;
        }
        body{
            margin: 0;
        }
        .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }

    </style>
    <body>
          <div class="container">
              <div class="box"></div>
          </div>  
    </body>
</html>

Felicidades estamos al final de este post. Espero que hayas disfrutado el tema, otro día más.

Relacionado

Bootstrap 5 Iconos: Nueva versión Alpha

La nueva versión de los iconos de Bootstrap 5 agregará casi 300 iconos nuevos, haciendo que el número final resultante de iconos incluidos en la librería sobrepase los 1.000 iconos. Se añadirán nuevos iconos de calendario para utilizar a la hora de agregar eventos y rangos ¡SEGUIR LEYENDO!

Guía de Selectores CSS para principiantes

Los selectores CSS se usan para definir el diseño de los elementos mediante CSS. Existen muchos tipos diferentes de selectores de CSS cada uno con su propia sintaxis única. Los selectores se encargan de decir al navegador a qué elementos se deben aplicar los valores indicados ¡SEGUIR LEYENDO!

¿Qué diferencias hay entre Boostrap y Tailwind CSS?

En los últimos tiempos, la batalla entre los frameworks CSS es terrible, y Tailwind CSS ha ganado mucha reputación entre los desarrolladores front end, siendo un numeroso grupo, los que tras probarlo deciden seguir usándolo como framework CSS de referencia dentro de sus "stacks", pilas o ¡SEGUIR LEYENDO!

Nunca ha existido un mejor momento para crear sitios web

Este artículo es una traducción completa de There’s never been a better time to build websites del blog de SimeonGriggs Mi historia del origen del desarrollo web se remonta a hace unos 25 años. En ese entonces pasé mis semanas jugando Red Alert, hasta el fin ¡SEGUIR LEYENDO!

El camino del Frontend Developer, por MrCodeDev

En este repositorio de Github de MrCodeDev vas a encontrar una importante lista de recursos para ayudarte a emprender el camino de llegar a ser Frontend Developer. El repositorio, ha sido creado por MrCodeDev y si deseas aportar algún contenido, puedes considerar el contactar con él; ¡SEGUIR LEYENDO!

Deja un comentario