将照片库置于屏幕中央

Question

如何使照片库在屏幕上居中？我不希望用户必须滚动才能找到图库。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 规则修改为上述内容。