I have been trying to find a solution to my question, but I can't seem to locate any answers. I have a webpage with a main div that contains all the content. I centered it using the following CSS:
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
https://i.sstatic.net/bYzy6.png
Everything works well when the height of the div is smaller than the viewport. However, if the div's height exceeds that of the viewport, half of the content ends up off-screen. This issue is particularly visible on mobile devices (see image)
https://i.sstatic.net/NXnw7.png
I thought about applying the transform only on desktop screens, but this would cause problems if the div's height increases. Another idea was to use JavaScript to check if the div's height is less than the viewport's height before applying the transform. However, I would prefer to stick to CSS alone. Any suggestions on how I could solve this?