流体コンテナ内に流体イメージを垂直にセンタリングします

Question

私は確かに、垂直方向のアラインメントCSSの質問に追加したくありませんが、まだ役に立たない解決策を見つけるのに何時間も費やしました。状況は次のとおりです。

スライドショーギャラリーを作成しています。私は、ユーザのウィンドウが許す限り、画像を大きく表示したい。だから私は、この外側のプレースホルダを持っている：

<section class="photo full"> 

（はい、私は、HTML5の要素を使用しています）。次のCSSがあります：

section.photo.full { 
    display:inline-block; 
    width:100%; 
    height:100%; 
    position:absolute; 
    overflow:hidden; 
    text-align:center; 
} 

次に、画像がその中に配置されます。画像の向きに応じて、私はautoに幅または高さ75％、および他のいずれかの軸を設定します。

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?> 
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/> 

そこで、我々は、流体画像の内部で、流体外側容器を持っています。イメージの水平方向のセンタリングは機能しますが、イメージを垂直方向にセンタリングする方法を見つけられないようです。私はセンタリング方法を研究しましたが、大部分はコンテナまたは画像が既知の幅または高さを持つと仮定します。それでは、ディスプレイ：table-cellメソッドがありますが、私にとってはうまくいかないようです。

私は立ち往生しています。私はCSSソリューションを探していますが、jsソリューションも公開しています。これは罰金うまくいく

div { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Running example.

Answer 1

：

section.photo.full { 
    display: table; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    text-align: center; 
} 

section.photo.full a { 
    outline: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 

section.photo.full img { 
    margin-top: 0; 
} 

私は表示テーブルを推測している

Answer 2

は多分これは（divがあなたのイメージに巻き付けdiv要素である）あなたのために働きます-cellは親コンテナがテーブルとして表示されていないため、あなたのために働いていませんでした。ここで

はjsfiddleでデモです：

http://jsfiddle.net/duopixel/5wzPS/

Answer 3

はのは、テーブルのナンセンスのすべてをスキップしてみよう！ :)

<div> 
    <img src="https://placehold.it/1000x1000"> 
</div> 

div { 
    position: relative; 
} 

img { 
    position: absolute; 
    width: 70%; 
    top: 50%; 
    left: 50%; 
    transform: translate3d(-50%,-50%,0); 
} 

例：https://jsfiddle.net/te29m9fv/1/