CSS: align accordion in the center of the page

Question

Today's question : how do i vertically align that *#@$¤<ç~&# accordion in the very center of my page (align it vertically & horizontally)? here's the jsFiddle

Answer 1

I just wrapped the whole accordion div in a 1x1 table and center aligned the table. Make the table width the same as the accordion width.

Answer 2

Try:

myUl = $("ul");
myUl.css('position', 'absolute');
myUl.css('top', $(window).height() / 2 - myUl.height() / 2);  
myUl.css('left', $(window).width() / 2 - myUl.width() / 2);  

Result: http://jsfiddle.net/z6Zyj/2/.

If you want a CSS only solution, you must do something as:

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -295px;
}

Where 45px is approximately half the height of your accordion and 245px is half the width of it.

Result: http://jsfiddle.net/z6Zyj/3/.