The problem is that you are moving top left corner of the container to the center not center of the container. That is why you may think that it is not centered. To move center of the container you need to compensate half of width and half of height of container.
$(".o-help").click(function(e) {
cardInFocus = $(this).closest(".p-small");
var $doc = $(document);
var centerX = $doc.width() / 2;
var centerY = $doc.height() / 2;
var destX = centerX - cardInFocus.width()/2;
var destY = centerY - cardInFocus.height()/2;
var $card = $(this).closest(".p-small");
var widthcard = $card.width();
$(".explain").css('position','fixed');
$(".explain").css('width', widthcard);
$card.addClass('explain');
var origX = $card.data('orig-x');
var origY = $card.data('orig-y');
$(".modal-bg").fadeIn("slow");
$(this).closest(".p-small").transition({x:destX - origX,y:destY-origY, duration:750});
});
You can view this fiddle to check the result.