Perché la larghezza: il 100% non funziona su div {display: table-cell}?

Question

Sto provando a centrare verticalmente e orizzontalmente alcuni contenuti sovrapponendo una diapositiva dell'immagine (flexslider). C'erano alcune domande simili a questa, ma non sono riuscito a trovare una soluzione soddisfacente che si applicasse direttamente al mio problema specifico. A causa delle limitazioni di FlexSlider, non posso usare position: absolute; sul tag img nella mia implementazione.

Ho quasi difficoltà a lavorare sotto. L'unico problema è che non riesco a ottenere la larghezza delle dichiarazioni di altezza & su inner-wrapper div con la proprietà display: table-cell.

Questo comportamento standard o mi manca qualcosa con il mio codice? Se si tratta di un comportamento standard, qual è la migliore soluzione al mio problema?

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%; 
} 

Nota: il contenuto centrato saranno più di 1 elemento, quindi non posso utilizzare il trucco line-height.

jsFiddle.

Answer 1

Mettere display:table; all'interno .outer-wrapper sembrava funzionare ...

JSFiddle Link

---

EDIT: Two Wrapper Uso della visualizzazione della cella di tabella

vorrei commentare la risposta, ma ho troppo poco rep :(comunque ...

Andando fuori your answer, sembra che tutto quello che dovete fare è aggiungere display:table; all'interno .outer-wrapper (Dejavu ?), e puoi liberarti di table-wrapper con tutto il cuore.

JSFiddle

Ma sì, il position:absolute permette di posizionare div sul img, ho letto troppo in fretta e ho pensato che non si poteva usare position:absolute a tutti, ma sembra che tu capito già. Puntelli!

Non ho intenzione di pubblicare il codice sorgente, dopo il lavoro tutti i suoi 99% delle timshutes, quindi si prega di fare riferimento alla sua risposta, o semplicemente usare il mio link jsfiddle

Aggiornamento: Un Wrapper Utilizzando Flexbox

e 'stato un po', e tutti i bambini freschi stanno usando FlexBox:

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

Full JSFiddle Solution

Browser Support (source): IE 11+, 42+ FireFox, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefisso), Android 4.1 e versioni successive (-webkit- prefisso)

CSS Tricks: a Guide to Flexbox

How to Center in CSS: ingresso come vuoi che il tuo contenuto sia centrato, e mostra come farlo in html e css. Il futuro è qui!

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

Ho immaginato questo fuori. So che questo aiuterà una persona un giorno.

Come verticalmente & orizzontalmente Centro un Div su un'immagine posizionato in modo relativo

La chiave era un terzo involucro. Voterò ogni risposta che usa meno wrapper.

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; 
} 

Potete vedere il lavoro jsFiddle qui.

Answer 4

Basta aggiungere min-height: 100% e min-width: 100% e che funzionerà. Ho avuto lo stesso problema. Non hai bisogno di un involucro 3 °

Answer 5

ho scoperto che più alto è il valore di 'width' è, il più piccolo della larghezza scatola è fatta e viceversa. L'ho scoperto perché ho avuto lo stesso problema in precedenza. Quindi:

.inner-wrapper { 
    width: 1%; 
} 

risolve il problema.

Answer 6

Benvenuti al 2017 questi giorni utilizzando vW e vH fare il trucco

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>