I'm currently programming my new web portfolio. So far so good. I decided to make it completely %-based and I'm struggeling with one last detail:

I have to center %-based images vertically in a div box which is also %-based.

Here is the fiddle: <http://jsfiddle.net/PX4tF/4/>

This is the code that doesn't work like I want it to be:

```
$(document).ready(function(){

         $(window).resize(function(){

          $('.vertical_center').css({
           position:'relative',
           left: ($(window).width() 
             - $('.vertical_center').outerWidth())/2,
           top: ($(window).height() 
             - $('.vertical_center').outerHeight())/2
          });

         });

         // To initially run the function:
         $(window).resize();

        });

```

The script I currently use only starts to work correctly when I resize the window. Before that it kind of centers the image but not correctly. Also I have multiple div boxes like the one in fiddle on my page and currently I have to duplicate the script to center it correctly after the browser is resiszed. Is there a way to make that easier? 

Here is the link to the beta site: <http://www.zeiteffekt.de/relaunch>

I'm not that programming guy so I hope you guys can help me with this.

Cheers,
Tim