Place text/div above centered element?-CodePudding

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?

CodePudding user response：

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 >
    <div >Hello!</div>
    <div ></div>
</div>

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

CodePudding user response：

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 >
   <div >
    <div >
      text above card
    </div>
    card
  </div>
 </div>

CodePudding user response：

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 >
  <!-- Card Wrapper -->
  <div >
    <div >Text above card</div>
    <div >Card Content (Centered on page)</div>
  </div>
</div>