width：100％がdiv {display：table-cell}で動作しないのはなぜですか？

Question

私は画像スライド（フレックススライダ）の上にいくつかのコンテンツを縦横に配置しようとしています。これに類似の質問がいくつかありましたが、私の特定の問題に直接適用される満足のいく解決策を見つけることができませんでした。 FlexSliderの制限のため、実装ではimgタグにposition: absolute;を使用できません。

私はほとんど以下の回避策が働いています。唯一の問題は、幅&の高さの宣言を divのdisplay: table-cellプロパティで動作させることができないことです。

この標準的な動作ですか、または私のコードで何か不足していますか？それが標準的な動作であれば、私の問題に対する最良の解決策は何ですか？

HTML

<ul> 
    <li> 
     <img src="#"> 
     <div class="outer-wrapper"> 
      <div class="inner-wrapper"> 
       <h1>My Title</h1> 
       <h5>Subtitle</h5> 
      </div> 
     </div> 
    </li> 
</ul> 

CSS

html, body { 
    margin: 0; padding: 0; 
    width: 100%; height: 100%; 
} 

ul { 
    background: #CCC; 
    height: 100%; 
    width: 100%; 
    list-style-position: outside; 
    margin: 0; padding: 0; 
} 

li { 
    width: 100%; 
    display: table; 
} 

img { 
    width: 100%; 
    height: 410px; 
} 

.outer-wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    margin: 0; padding: 0; 
} 

.inner-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
} 

注：中心内容は以上1つの要素になりますので、私は行の高さのトリックを使用することはできません。

jsFiddle。 .outer-wrapper内display:table;を置く

Answer 1

が動作するように見えた...

JSFiddle Link

---

EDIT：二つ

がオフyour answer行く...ディスプレイの表のセル

を使用したラッパーは、私はあなたの答えにコメントだろうが、私はとにかく:(あまりにも少ない担当者を持って、そしてDejaVu（あなたが.outer-wrapper内display:table;を追加するだけですように思えます？）、あなたは全面的にtable-wrapperを取り除くことができます。

JSFiddle

しかし、ええ、position:absoluteはあなたがimg上divを配置することができます、私はあまりにも速く読んで、あなたはまったくposition:absoluteを使用することができなかったと思ったが、あなたはすでにそれを考え出したように思えます。小道具！

私は彼の答えを参照してください、またはちょうど私jsfiddleリンクを使用し、そのすべての99％timshutesの仕事の後に、ソースコードを投稿するつもりはない

更新：ワンラッパーフレキシボックス

使い方

それはしばらくしていると、すべてのクールな子供たちがフレキシボックスを使用している：

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;"> 
    stuff to be centered 
</div> 

Full JSFiddle Solution

ブラウザのサポート（source）：IE 11+、FireFoxの42+、クロム46+、サファリ8+、iOS版8.4+（-webkit-接頭辞）、アンドロイド4.1以降（-webkit-プレフィックス）

CSS Tricks: a Guide to Flexbox

How to Center in CSS：入力どのようにあなたのコンテンツを中心にしたいのか、それはhtmlとcssでそれを行う方法を出力します。未来はここです！

Answer 2

How about this? (jsFiddle link)

CSS

ul { 
    background: #CCC; 
    height: 1000%; 
    width: 100%; 
    list-style-position: outside; 
    margin: 0; padding: 0; 
    position: absolute; 
} 
li { 
background-color: #EBEBEB; 
    border-bottom: 1px solid #CCCCCC; 
    border-right: 1px solid #CCCCCC; 
    display: table; 
    height: 180px; 
    overflow: hidden; 
    width: 200px; 
} 
.divone{ 
    display: table-cell; 
    margin: 0 auto; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 

} 
img { 
    width: 100%; 
    height: 410px; 
} 
.wrapper { 
    position: absolute; 
} 

Answer 3

私はこれを考え出しました。私はこれがいつか誰かを助けることを知っています。

は、どのようにキーが第三のラッパーだった、相対位置の画像

にわたり&水平センター事業部を縦にします。私はより少ないラッパーを使用する答えを投票するだろう。

HTML

<div class="wrapper"> 
    <img src="my-slide.jpg"> 
    <div class="outer-wrapper"> 
     <div class="table-wrapper"> 
      <div class="table-cell-wrapper"> 
       <h1>My Title</h1> 
       <p>Subtitle</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

html, body { 
margin: 0; padding: 0; 
width: 100%; height: 100%; 
} 

ul { 
    width: 100%; 
    height: 100%; 
    list-style-position: outside; 
    margin: 0; padding: 0; 
} 

li { 
    width: 100%; 
    display: table; 
} 

img { 
    width: 100%; 
    height: 100%; 
} 

.outer-wrapper { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    margin: 0; padding: 0; 
} 

.table-wrapper { 
    width: 100%; 
    height: 100%; 
    display: table; 
    vertical-align: middle; 
    text-align: center; 
} 

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

あなたはここで働いjsFiddleを見ることができます。

Answer 4

min-height：100％とmin-width：100％を追加するだけで動作します。私も同じ問題がありました。 3番目のラッパーは必要ありません

Answer 5

「幅」の値が高いほど、ボックスの幅が小さくなり、逆も同様です。以前は同じ問題があったので、これを見つけました。したがって：

.inner-wrapper { 
    width: 1%; 
} 

が問題を解決します。

Answer 6

ようこそ2017に、これらの日はvWとvHトリックに

html, body { 
 
    margin: 0; padding: 0; 
 
    width: 100%; height: 100%; 
 
} 
 

 
ul { 
 
    background: #CCC; 
 
    height: 100%; 
 
    width: 100%; 
 
    list-style-position: outside; 
 
    margin: 0; padding: 0; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 410px; 
 
} 
 

 
.outer-wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    margin: 0; padding: 0; 
 
} 
 

 
.inner-wrapper { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    width: 100vw; /* only change is here "%" to "vw" ! */ 
 
    height: 100vh; /* only change is here "%" to "vh" ! */ 
 
}

<ul> 
 
    <li> 
 
     <img src="#"> 
 
     <div class="outer-wrapper"> 
 
      <div class="inner-wrapper"> 
 
       <h1>My Title</h1> 
 
       <h5>Subtitle</h5> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</ul>