Here's the effect I want: I have a set of tiles that I want to arrange in a grid on the screen, as many across as will fit given the screen size. Then, I want the whole block centered, i.e. whatever space is left over after fitting as many tiles as possible, I want split half left and half right. Or, if there aren't enough tiles to fill the width, I want the remaining space divided.

For example, let's represent each tile as "XXXX". We have some space between them, which I'll represent with an "-". Let's say we have five tiles. So, on a very wide screen, we might see this:

```
---XXXX-XXXX-XXXX-XXXX-XXXX---

```

On a narrower screen:

```
--XXXX-XXXX-XXXX-XXXX---
--XXXX------------------

```

Narrower still:

```
-XXXX-XXXX-XXXX-
-XXXX-XXXX------

```

Etc.

The tiles are div's with various stuff inside. For purposes here, we can treat them as an atomic unit.

I can get the tiles to wrap easily enough by making them float's or inline-blocks. I thought I could then just wrap them in a larger div, then center that div within an outer div. But no.

If I make them float's, it centers fine as long as they all fit on one row. But once it takes two rows, they all go flush left. It looks like CSS's layout engine calculates the width of the row as if there was no wrapping, uses that to calculate centering, makes left and right margin 0, and THEN wraps within the inner block.

The closest I've come is to make them inline-blocks and put text-align: center on an outer block. But then, the last row is centered under the first row, instead of being flush-left under the first row.

See <http://jsfiddle.net/vaLLsudh/> for that last, almost solution.