html - div 内の img の絶対中心位置

Question

画像の幅がわからない場合、divまたはテーブルセルの絶対位置にimgを中央揃えする方法は?

例えば

<div style="position: relative">
    <img style="position: absolute" />
</div>

Answer 1

要素を相対的な親に対して水平方向および垂直方向に揃えます。

<div style="position: relative">
    <img class="centered" />
</div>

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

'top' と 'left' を 50% に設定すると、要素の左上隅が中央に配置されます。平行移動は、X と Y の両方で -50% であり、要素を親の正確な中心に設定します。

ブラウザーのサポートについては、こちらをご覧ください: Translate2d - caniuse.com

Answer 2

画像のサイズを知っていると仮定すると、負のマージンのトリックを使用できます。

img{
   top:50%;
   left:50%;
   margin-left  : -(<imagewidth>/2)px;
   margin-height: -(<imageheight>/2)px;
}

あなたができる機能をサポートするブラウザのみを対象とする場合calc()：

img{
   top:  calc(50% - <imagewidth>/2px);
   left: calc(50% - <imageheight>/2px);
}

ブラウザが翻訳をサポートしている場合は、画像のサイズの 50% まで翻訳できます。

img{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

それが不可能な場合、最後の手段はマークアップを変更することですdisplay:table。

<div>
  <div>
    <img />
  </div>
</div>

div{height:100%;width:100%;
   display:table;
   text-align: center;
   vertical-align: middle;}
div>div{
    display:table-cell;
}

最新のケースについてはデモを参照してください

Answer 3

画像を垂直方向に中央揃えにする簡単な方法

あなたがdivの高さを知っているなら。次に、画像を垂直方向に揃えることができます。

div{
    text-align:center;
    height:150px;
    line-height: 150px;
}

img{
   vertical-align: middle;
}