I have created a custom lightbox, and I am trying to center the DIV
to the screen, DIV is in FIXED position, I am able to center it from left and right but not vertically. To center it vertically I am doing following by JS:
- Getting the height of the image via JS
- Divide the height by 2
- fixed div position is from top 50%, and adding negative margin top in the div (negative margin top is the value which is divided by 2)
But its not centering, what approach it should have?
This is the JSFiddle example (Please view in full screen)
Here is the JS code
$(document).ready(function() {
//Open light box on click
$(".gall-info").click(function(){
//show lightbox
$(".gallFullView").css({"opacity":"1", "visibility":"visible"});
$(".galleryShade").fadeIn();
$(".gall-info").css("bottom","0");
//Get the heigh of image
var gallFullViewImgHeight = $(".gallFullView-image > img").height();
//Divide the height by 2
var gallFullViewHalf = gallFullViewImgHeight / 2;
//Apply the value of above in negative margin top to center the wrapper
$(".gallFullView").css("margin-top", - gallFullViewHalf);
});
});
thanks