どういう風にセンタリングしたいのか?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 -->