[mmat1]

Originally Posted by StevenLin

I want to put the colored box in the center, but I've tried several css that don't seem to work. How do I put it in the central position instead of in the current left position?

I guess your box should alway stay at the same size and should always be perfectly centered.

IMO it's not possible to find a solution with paragraph or table formatting which is perfect everywhere.

Table-fomatting:

table    { margin: 1em auto }
td { border: 1px solid black; text-align: center; width: 200px }

works quite well at most (but not all) devices.

With paragraph-formatting it will be a bit difficult to keep the box at the same size, if the screen size changes.

So i got a third suggestion: make a image.