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