Skip to main content
記載が重複してたので削除
ソース リンク
user10259
user10259

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

どういう風にセンタリングしたいのか?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; /* 天地中央に揃える */
    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>

どういう風にセンタリングしたいのか?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から移動 */
}
<div id="wrapper">
  <div id="inner_wrap">
    <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
  </div>
</div>

意図を汲み取り追記
ソース リンク
user10259
user10259

どういう風にセンタリングしたいのか?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; /* 天地中央に揃える */
    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>

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

どういう風にセンタリングしたいのか?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; /* 天地中央に揃える */
    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>

ソース リンク
user10259
user10259

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