'Place text/div above centered element?

I have a card that is centered in the middle of the screen as follows:

        <div className="flex flex-col items-center justify-center w-full h-screen bg-gray-200">
            <div className="w-full mx-0 my-auto box-border card card-compact max-w-[50vw] bg-white shadow-xl">
            </div>
        </div>

For those not familiar with tailwind CSS, the outer div has style:

.outer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100vh;
  background: /* some color */
}

and the inner div has a style

.inner {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 50vw;
    /* some card stuff */
}

This produces a card that is centered horizontally & vertically on the screen. So far so good.

The issue is that I want to have some text above the card, but I want to keep the card itself horizontally & vertically centered. What would be the best way to do this?

htmlcsstailwind-css


Solution 1:[1]

Is this what you're looking for?

.outer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100vh;
   background-color: red;

}

.inner {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 50vw;
    background-color: blue;
    width: 50px;
    height: 50px;
    /* some card stuff */
}
<div class="outer">
    <div class="innerText">Hello!</div>
    <div class="inner"></div>
</div>

All I added was a div with text inside the outer div.

Solution 2:[2]

You can add the text inside .inner and use absolute positioning for the text and relative positioning for the .inner. In this way, the card is still centered, and you can adjust the distance of the text from top of the card.

.outer {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


.inner {
  position: relative;
  background-color: #272343;
  width: 100%;
  max-width: 50vw;
  height: 15rem;
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-transform: uppercase;
}

.text {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #272343;
}
<div class="outer">
   <div class="inner">
    <div class="text">
      text above card
    </div>
    card
  </div>
 </div>

Solution 3:[3]

You can create a card wrapper that uses relative positioning with an absolutely positioned child element above the wrapper.

This is how you can do it just using TailwindCSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Outer Div -->
<div class="flex min-h-screen flex-col items-center justify-center bg-gray-200">
  <!-- Card Wrapper -->
  <div class="relative box-border w-1/2 bg-white shadow-xl">
    <div class="absolute top-0 w-full -translate-y-full transform pb-2 text-center">Text above card</div>
    <div class="p-8">Card Content (Centered on page)</div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rani Giterman
Solution 2 Erel Japco
Solution 3 ptts

Related Questions