How do I create a centered div of uncertain width containing left-aligned elements?

I have several uniform blue elements (<div style="display: inline-block;">) inside a red div inside a purple div. Mockup (imgur).

I would like the blue elements to be left-aligned (as many in a row as will fit in the purple div width), with a red div shrink-wrapped around them. But then I would like the red div be horizontally centered inside the purple div.

I was hoping to do something like this (jsFiddle), but that only works if the red div has a specified width.

---