cssで複数画像を中央寄せしつつ左頭出しする方法

180x180の画像を数十枚掲載します。
ブラウザのサイズを変えた際、全体は中央寄せで左の頭出しをしたいです。
(改行して余った時は、中央にくるのではなく左に行く)
以下の様にしたのですが、数が少ない時は中央寄せになるのですが、2行になると中央寄せにならず左に寄ってしまいます。(最大で画像サイズ分右余白が出来てしまう。)
これをしっかり中央寄せにするにはどうしたらいいでしょうか?
.page_photo_con{
text-align:center;
margin:0 auto 60px;
}
.page_photo{
text-align:center;
display:inline-block;
overflow:hidden;
}
.page_photo_pic{
margin:10px;
}
------
<div class="page_main_con">
<div class="page_photo">
<a href="./photo/12/xx.jpg"><img src="./photo/12/xx.jpg"></a>
<a href="./photo/12/xx.jpg"><img src="./photo/12/xx.jpg"></a>
　　～
</div>
</div>