Alineación vertical con Tailwind CSS en div de pantalla completa

Preguntas HTML
⏰ 7 minutos de lectura

avatar de usuario de ajthinking
pensando

¿Cómo puedo alinear verticalmente un div con Tailwind? Lo que quiero:

-----------------------------------
|                                |
|                                |
|                                |
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
-----------------------------------

Lo que tengo actualmente:

-----------------------------------
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
|                                |
|                                |
|                                |
-----------------------------------

HTML

<div class="flex flex-col h-screen my-auto items-center bgimg bg-cover">
  <h3 class="text-white">heading</h3>
  <button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">
    call to action
  </button>
</div>

CSS

.bgimg {
    background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}

Me he centrado con éxito en el eje secundario (izquierda-derecha) con clase items-center. Leyendo la documentación, intenté align-middle Pero no funciona. He confirmado que los divs tienen altura completa y my-auto.

Estoy usando esta versión de Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Aquí hay un JSFiddle: https://jsfiddle.net/7xnghf1m/2/

  • Esto ya está bastante bien documentado en los documentos de TailwindCSS: tailwindcss.com/docs/flexbox-align-items/#center

    – Linus Juhlin

    8 de marzo de 2019 a las 4:24

  • reemplazar mi-auto por justificar-centro

    – Jamal Eddine Naamani

    9 oct 2022 a las 13:06

  • m-auto text-center funcionó bien para mí.

    – Vivek Hotti

    21 de enero a las 17:19

Avatar de usuario de Nartub
Nartub

también puedes hacer

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

  • ¿cómo? ¿¿Cómo funciona esto?? Por favor, explique. @Nartub

    – drumil barot

    9 oct 2022 a las 15:31

  • Hay mucha magia que involucra márgenes automáticos y flexbox, sugiero buscar en Google para obtener todos los detalles 🙂

    – Nartub

    11/10/2022 a las 15:10

  • @dhrumilbarot flex se aplica solo al siguiente elemento div (en este caso, el que tiene class=”m-auto”), h-screen establece la altura en 100vh (100% de la altura de la vista) para darle todo el espacio de la pantalla para trabajar. m-auto establece los márgenes en automático, lo que lo rellena y le da ese aspecto ‘centrado’

    – Corey

    20 de diciembre de 2022 a las 3:57

Haciendo referencia en parte a la solución de @mythicalcoder pero usando solo las clases necesarias proporcionadas por TailwindCss (Versión 1.8.+):

  • flex : Para usar un flex-div como contenedor
  • h-screen : para ajustar el tamaño de la altura del contenedor a la altura de la ventana gráfica.
  • justify-center : Para justificar el centro (centro horizontal) – eje principal – Doc
  • items-center : Para alinear los elementos al centro (centro horizontal) – eje transversal – Doc

Mi solución para centrar dos líneas de texto:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

  <div class="flex h-screen justify-center items-center">
    <div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
        <h1 class="text-3xl">HEADING</h1>
        <p class="text-xl">Sub text</p>
    </div>
  </div>

Avatar de usuario de Linus Juhlin
linus juhlin

Justify-Center y Items-Center

Si bien la respuesta de Anders resuelve el problema para este caso particular, creo que es importante tener en cuenta que usar justify-center y items-center es circunstancial.

Echemos un vistazo a uno de los ejemplos de la documentación de viento de cola.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

Como podemos ver, el código anterior centra los elementos horizontalmente. La razón de esto es que la clase de centro de justificación centra el elemento en el eje principal del contenedor flexible.

Esto significa que si tuviéramos que cambiar el eje principal a ‘columna’, obtendríamos un resultado diferente.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

Justify-Center y Items-Center centran los elementos en el eje principal y el eje transversal, y se pueden usar uno en lugar del otro. Son opuestos entre sí y producirán resultados diferentes según cuál sea el eje principal actual.

avatar de usuario de mythicalcoder
codificador mítico

De acuerdo con la pregunta, los “Elementos 1”, “Elementos 2” deben estar alineados tanto horizontal como verticalmente.

Horizontal => texto-centro/justificar-centro

Vertical => centro de elementos

Aquí hay un código de muestra para producir una vista similar a la imagen ASCII en la pregunta.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="relative h-32 bg-blue-400">
  <div class="absolute inset-0 flex items-center justify-center">
    Item 1
    <br>
    Item 2
  </div> 
</div>

Avatar de usuario de Agni Gari
Agni Gari

He tratado de resumir diferentes ocurrencias de centrar el divs

Centrar divs en Columna

Para ancho de ajuste
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2">item 1</div>
    <div className="bg-pink-500 p-2">item 2</div>
  </div>

ingrese la descripción de la imagen aquí

Para ancho completo
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2 w-full flex justify-center">
      item 1
    </div>
    <div className="bg-pink-500 p-2 w-full text-center">item 2</div>
  </div>

ingrese la descripción de la imagen aquí

Extra:

Centrar divisiones divididas verticalmente
<div class="flex h-screen flex-col">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

ingrese la descripción de la imagen aquí

Centrar divisiones divididas horizontalmente
<div class="flex h-screen">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

ingrese la descripción de la imagen aquí

Divs centrales en fila

Para altura de ajuste

<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex justify-center bg-green-500 p-2">item 1</div>
    <div class="bg-pink-500 p-2 text-center">item 2</div>
  </div>
</div>

ingrese la descripción de la imagen aquí

Para altura completa

<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex h-full items-center bg-green-500 p-2">item 1</div>
    <div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
  </div>
</div>

ingrese la descripción de la imagen aquí

Avatar de usuario de Rizky92
Rizky92

La respuesta de @bastiotutuama ya es buena, sin embargo, si hay otros elementos circundantes, use las utilidades de autoalineación en lugar del centro de elementos. fuente

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="bg-blue-500 flex justify-center h-screen">
    <div class="bg-red-300 self-start">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
    <div class="bg-yellow-300 self-center">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
    <div class="bg-red-300 self-end">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
</div>

avatar de usuario de panjeh
panjeh

Tienes otra opción que es rejilla y puede hacer

<div class="grid justify-items-center items-center h-screen">
  <div>
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

¿Ha sido útil esta solución?