Why width: 100% doesn't work on div {display: table-cell}?

Question

I am trying to vertically and horizontally center some content superimposed on an image slide (flexslider). There were some similar questions to this, but I could not find a satisfactory solution that directly related to my specific problem. Due to the limitations of FlexSlider, I cannot use position: absolute; in the img tag in its implementation.

I have almost no workaround below work. The only problem is that I cannot get the width and height declarations to work on the inner-wrapper div with the display: table-cell property.

Is this the standard behavior, or am I missing something with the code? If this is standard behavior, what is the best solution for my problem?

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

Note: centered content will consist of more than one element, so I cannot use the line-line trick.

jsFiddle .

Answer 1

Room display:table; inside .outer-wrapper seemed to work ...

JSFiddle link

---

EDIT: two wrappers using a display table cell

I would comment on your answer, but I have too little reputation :( anyway ...

Disable your answer , it seems that all you have to do is add display:table; inside .outer-wrapper (Dejavu?) and you can get rid of table-wrapper wholeheartedly.

Jsfiddle

But yes, position:absolute allows you to put a div on top of img , I read too fast and thought you couldn't use position:absolute , but it looks like you already understood that. Props!

I will not publish the source code since all its 99% timbres work, so please refer to its answer or just use the jsfiddle link

Update: One Converter Using Flexbox

It was time, and all the cool kids use flexbox:

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

Complete JSFiddle Solution

Browser support ( source ): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ ( -webkit- ), Android 4.1+ ( -webkit- prefix)

CSS Tricks: Flexbox Guide

How to create a center in CSS : enter how you want your content to be centered, and it displays how to do it in html and css. The future is here!

Answer 2

I get it. I know this will someday help someone.

How to vertically and horizontally center a div over a relatively positioned image

The key was the third shell. I would vote for any answer that uses fewer wrappers.

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

Here you can see the working jsFiddle .

Answer 3

I found that the higher the "width" value, the smaller the width of the box and vice versa. I found this because I had the same problem before. So:

 .inner-wrapper { width: 1%; } 

solves the problem.

Answer 4

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 5

I was scared that I should use one of these solutions, but just using vW and vH these days will do the trick ...

 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> 

Answer 6

Just add min-height: 100% and min-width: 100% and it will work. I have the same problem. You do not need a 3rd wrapper