When there's not a lot of content it is centered, but when I have more content it crops and the beginning of modal is not visible.
If I don't use position absolute everything is OK, but then if I have less content it's not centered
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
z-index: 1000;
overflow: auto;
background: purple;
}
.modal {
max-width: 528px;
padding: 24px 32px;
border-radius: 16px;
box-shadow: 0 0 8px 0 rgba(193, 192, 196, 0.35);
background-color: #ffffff;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<body>
<div class="overlay">
<div class="modal">
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
</div>
</div>
</body>
