I'm trying to center a jQuery Mobile page with a panel and "margin: 0 auto" doesn't work, so here is what I have:

HTML Code:
<style type="text/css">
@media screen and (min-width:65em){
	div[data-role="panel"], .ui-page{
		margin-left:2.5em;
	}
}
</style>
I have a script that outputs about a dozen of these to add another 2.5em for every 5em of screen width over the initial 60em (for large screens) ...

It works, but the problem is that it's messy and clunky. It has a shutter/jolt every 5em of page transition width, which looks terrible when a window is being re-sized manually.

Is there a more fluid way to do this? Or some sort of "smooth" animation that can widen the margins by 2.5em at each break-point or dynamically from the initial break-point? Also, I cannot have a percentage here as it would not ignore the initial 60em's of width and it would not center the content well.

Any advice is greatly appreciated, thanks in advance!