jquery puff effect

Well , you have a few problems there. To avoid the flickering when you first press the toggle button just invert the order of hide & show in the toggle function.

To center the div you're doing it wrong. This is the easiest way to center elements, and it always works. Your div will no longer shift to the sides.

div {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px /* Half the height */
    margin-left: -250px /* Half the width */
}

For the opacity to work with the animation you'll need to do it with jQuery too. I did it as callback functions but you can do it altogether.

As a side note, when you declare position: absolute you don't need display: block, it's implied.

Check a working example here http://jsfiddle.net/q7FcA/5/