So i've got a modal div (set with z-index) that I'm trying to center vertically. The thing is I use it for not only one content but several ones, so the height is not fix. And while having a general "fix" (I'll explain in just after) of -150px in the margin-top generally works for short content, when having a lot of content, the div will start at mid-page and finish at the end (which is not what I want at all). Here is my code :

```
.modal
{
    padding: 10px;
    border: 1px black solid;
    width: 80%;
    position: absolute;
    background: white;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -40%;
    z-index: 1000;
    border-radius: 5px; 
    max-height: 80%;
    overflow: scroll;
}

```

So here you can see the "fix". It works kind of well when the content is short :

![Short content](https://i.stack.imgur.com/AuzzX.jpg)

It's pretty ugly when the content is big :

![Large content](https://i.stack.imgur.com/8x5ro.jpg)

Does anyone have an idea of how to fix that ? 

Thank you in advance