CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: translateを一緒に使いましょう。
モダンブラウザであれば問題なく動きます。

下記から確認できます。
デモ

レスポンシブで特に効果を発揮するので試してみてください。