在屏幕上居中照相館

Question

如何將photo gallery居中在屏幕上？我不希望用戶必須滾動找到畫廊..

的Javascript：

<!-- The JavaScript --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 

       var $ps_albums  = $('#ps_albums'); 
       var $ps_container = $('#ps_container'); 
       var $ps_overlay  = $('#ps_overlay'); 
       var $ps_close  = $('#ps_close'); 
       /** 
       * when we click on an album, 
       * we load with AJAX the list of pictures for that album. 
       * we randomly rotate them except the last one, which is 
       * the one the User sees first. We also resize and center each image. 
       */ 
       $ps_albums.children('div').bind('click',function(){ 
        var $elem = $(this); 
        var album_name = 'album' + parseInt($elem.index() + 1); 
        var $loading = $('<div />',{className:'loading'}); 
        $elem.append($loading); 
        $ps_container.find('img').remove(); 
        $.get('photostack.php', {album_name:album_name} , function(data) { 
         var items_count = data.length; 
         for(var i = 0; i < items_count; ++i){ 
          var item_source = data[i]; 
          var cnt   = 0; 
          $('<img />').load(function(){ 
           var $image = $(this); 
           ++cnt; 
           resizeCenterImage($image); 
           $ps_container.append($image); 
           var r  = Math.floor(Math.random()*41)-20; 
           if(cnt < items_count){ 
            $image.css({ 
             '-moz-transform' :'rotate('+r+'deg)', 
             '-webkit-transform' :'rotate('+r+'deg)', 
             'transform'   :'rotate('+r+'deg)' 
            }); 
           } 
           if(cnt == items_count){ 
            $loading.remove(); 
            $ps_container.show(); 
            $ps_close.show(); 
            $ps_overlay.show(); 
           } 
          }).attr('src',item_source); 
         } 
        },'json'); 
       }); 

       /** 
       * when hovering each one of the images, 
       * we show the button to navigate through them 
       */ 
       $ps_container.live('mouseenter',function(){ 
        $('#ps_next_photo').show(); 
       }).live('mouseleave',function(){ 
        $('#ps_next_photo').hide(); 
       }); 

       /** 
       * navigate through the images: 
       * the last one (the visible one) becomes the first one. 
       * we also rotate 0 degrees the new visible picture 
       */ 
       $('#ps_next_photo').bind('click',function(){ 
        var $current = $ps_container.find('img:last'); 
        var r   = Math.floor(Math.random()*41)-20; 

        var currentPositions = { 
         marginLeft : $current.css('margin-left'), 
         marginTop : $current.css('margin-top') 
        } 
        var $new_current = $current.prev(); 

        $current.animate({ 
         'marginLeft':'250px', 
         'marginTop':'-385px' 
        },250,function(){ 
         $(this).insertBefore($ps_container.find('img:first')) 
           .css({ 
            '-moz-transform' :'rotate('+r+'deg)', 
            '-webkit-transform' :'rotate('+r+'deg)', 
            'transform'   :'rotate('+r+'deg)' 
           }) 
           .animate({ 
            'marginLeft':currentPositions.marginLeft, 
            'marginTop' :currentPositions.marginTop 
            },250,function(){ 
             $new_current.css({ 
              '-moz-transform' :'rotate(0deg)', 
              '-webkit-transform' :'rotate(0deg)', 
              'transform'   :'rotate(0deg)' 
             }); 
           }); 
        }); 
       }); 

       /** 
       * close the images view, and go back to albums 
       */ 
       $('#ps_close').bind('click',function(){ 
        $ps_container.hide(); 
        $ps_close.hide(); 
        $ps_overlay.fadeOut(400); 
       }); 

       /** 
       * resize and center the images 
       */ 
       function resizeCenterImage($image){ 
        var theImage = new Image(); 
        theImage.src = $image.attr("src"); 
        var imgwidth = theImage.width; 
        var imgheight = theImage.height; 

        var containerwidth = 460; 
        var containerheight = 330; 

        if(imgwidth > containerwidth){ 
         var newwidth = containerwidth; 
         var ratio = imgwidth/containerwidth; 
         var newheight = imgheight/ratio; 
         if(newheight > containerheight){ 
          var newnewheight = containerheight; 
          var newratio = newheight/containerheight; 
          var newnewwidth =newwidth/newratio; 
          theImage.width = newnewwidth; 
          theImage.height= newnewheight; 
         } 
         else{ 
          theImage.width = newwidth; 
          theImage.height= newheight; 
         } 
        } 
        else if(imgheight > containerheight){ 
         var newheight = containerheight; 
         var ratio = imgheight/containerheight; 
         var newwidth = imgwidth/ratio; 
         if(newwidth > containerwidth){ 
          var newnewwidth = containerwidth; 
          var newratio = newwidth/containerwidth; 
          var newnewheight =newheight/newratio; 
          theImage.height = newnewheight; 
          theImage.width= newnewwidth; 
         } 
         else{ 
          theImage.width = newwidth; 
          theImage.height= newheight; 
         } 
        } 
        $image.css({ 
         'width'   :theImage.width, 
         'height'  :theImage.height, 
         'margin-top' :-(theImage.height/2)-10+'px', 
         'margin-left' :-(theImage.width/2)-10+'px'  
        }); 
       } 
      }); 
     </script> 

Answer 1

.ps_container { 
    width: 480px; 
    height: 350px; 
    position: fixed; /* EDIT: changed absolute to fixed*/ 
    top: 50%; 
    margin-top: -175px; 
    left: 50%; 
    margin-left: -240px; 
    z-index: 100; 
} 

的style.css行：59

修改.ps_container規則到上面。