How can I vertically center a div without knowing the parent height?

Question

Hello I hope you can help me. I'm trying to vertically center a div but I keep failing. I think the problem is that the div is a gallery composed of 2 elements - the main images which are not scrollable because they fit the screen - the thumbnails (that appear through jquery hide/show and hide the main images clicking on the specific icon). I can't center the child div (the gallery) because I can't set a height to the parent (page container) because I need the thumbnails to be scrollable. but I want the main images to be centered in the page...

here's my html code (I kept the essential):

<!--page -->
<div id="gallery-container">

<!-- main images -->        
<div class="cycle-slideshow">
<img src="img.jpg">  
</div>

<!-- thumbnails -->
<div class="thumbs">
<img src="img.jpg">
</div>

<!-- jquery hide/show code -->
<script type="text/javascript">
$('.thumbsicon').on('click', function() {
$('.cycle-slideshow').hide(); $('.thumbs').fadeIn();
});
$('.thumbs li img').on('click', function() {
var imgSrc = $(this).attr('src');   
$('.cycle-slideshow').fadeIn('slow').css('background-image', 'url( + imgSrc + )');
$('.thumbs').hide(); 
});
</script>
</div>

And the css (consider that my website has a 250px sidebar menu on the left):

#gallery-container{width:700px;z-index:70;margin:0   auto;position:relative;overflow:hidden;padding:0 20px 0 270px;}

.cycle-slideshow {width:700px;height:517px;margin:0 auto;padding:0;position:relative;}

.thumbs {position:relative; width:700px; margin:0 auto; padding:0; display:none;}

I tried many css solutions but none seems to be working. What can I do? Thanks in advance...

Answer 1

here's a stackoveflow that I adapted the accepted answer's code from for my own purposes a while back. Here's what I have to position to the window or to the parent element:

Using jQuery to center a DIV on the screen

Demo: http://jsfiddle.net/6P7AM/1/

jQuery.fn.center = function (centerToWindow) {
    var parent = null;
    var positionCss = null;
    if (centerToWindow) {
        parent = window;
        positionCss = "absolute";
    } else {
        parent = this.parent();
        positionCss = "relative";
    }
    this.css({
        "position": positionCss,
            "top": Math.max(0, (($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop()) + "px",
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
    return this;
}

$(function () {
    $(window).resize(function () {
        $("#gallery-container").center(true);
    }).trigger("resize");
});

Answer 2

On the parent containing the elements you would like to center, set these CSS properties.

display:table-cell; vertical-align:middle;

Answer 3

You should find what you want in this post : http://css-tricks.com/centering-in-the-unknown/

Answer 4

if you don't know the parent height, you can get it in jQuery with

var parentHeight = $('#gallery-container').height();

then you can use parentHeight throughout your code to help you center like so:

var parentHeight = $('#gallery-container').height();
$('#gallery-container').css('margin-top', '-' + (parentHeight + 'px');

and then of course you'd have to have this in your css:

#gallery-container {
    position: absolute;
    top: 50%;
}

make sure you call this centering code on $(document).ready(); of course, but also on $(window).resize();