html - Center vertically a modal div which is not always the same height? -

so i've got modal div (set z-index) i'm trying center vertically. thing use not 1 content several ones, height not fix. , while having general "fix" (i'll explain in after) of -150px in margin-top works short content, when having lot of content, div start @ mid-page , finish @ end (which not want @ all). here 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 can see "fix". works kind of when content short :

it's pretty ugly when content big :

does have idea of how fix ?

thank in advance

you use this. top 50% position div on 50% of container y translate -50% referred height , no container:

.modal {   padding: 10px;   border: 1px black solid;   width: 80%;   position: absolute;   background: white;   left: 50%;   margin-left: -40%;   z-index: 1000;   border-radius: 5px;    max-height: 80%;   overflow: scroll;   top: 50%;   transform: translatey(-50%);   -o-transform: translatey(-50%);   -moz-transform: translatey(-50%);   -webkit-transform: translatey(-50%); } 

fiddle