'CSS component is moving up the screen to the header

I have used these CSS properties for my card, however whenever I move the page to test the responsiveness the component moves upwards towards the header.

(I would post a photo but I don't have the rep yet)

.card {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

<div className="card">
        <div className="p-4  bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-96 min-w-full">
          
        </div>
      </div>
csstailwind-css


Solution 1:[1]

I think you can solve this with a parent div unsure

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 Doo Jam

Related Questions