The simplest way is to use display: inline-block
and text-align: center
like so:
.thumbnails { text-align: center; }
.thumbnails li { display: inline-block; margin: 0; float: none; }
The initial trouble was Bootstrap adds .thumbnails li { float: left }
which throws off the alignment. Adding float: none;
to override fixed it right up.