どういう風にセンタリングしたいのか?HTMLのソースが無いので推測ですが、 `margin`をつける要素が違うのではないでしょうか? サンプル作成してみましたが、こういうことでしょうか? <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> #wrapper { display:table; /* 要素をテーブルのようにする */ width:100%; max-width:600px; height:300px; background:#00f; } #center-image { display:table-cell; /* 要素をテーブルのようにする */ text-align:center; /* インライン要素の中央揃え */ vertical-align:middle; /* 天地中央に揃える */ margin:0 auto; /* wrapperから移動 */ } <!-- language: lang-html --> <div id="wrapper"> <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px"> </div> <!-- end snippet --> ---------- **追記** なるほど、縦にもセンタリングしたいのですね? では、質問文のコード基準で変更するとimgに直接ではなく テーブルセル用の`wrapper`をもう1つ作ってはどうでしょうか? <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> #wrapper { display:table; /* 要素をテーブルのようにする */ width:100%; max-width:600px; height:300px; background:#00f; } #inner_wrap{ display:table-cell; /* 要素をテーブルのようにする */ text-align:center; /* インライン要素の中央揃え */ vertical-align:middle; /* 天地中央に揃える */ margin:0 auto; /* wrapperから移動 */ vertical-align: middle; /* セル内の位置をmiddleに */ } <!-- language: lang-html --> <div id="wrapper"> <div id="inner_wrap"> <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px"> </div> </div> <!-- end snippet -->