Why is width: 100% not working on div {display: table-cell}?

Question

I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation.

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

Is this standard behavior, or am I missing something with my code? If it's standard behavior, what's the best solution to 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: the centered content will be more than 1 element, so I can't use the line-height trick.

jsFiddle.

score 78 · Accepted Answer · edited May 23 '17 at 12:09

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

JSFiddle Link

EDIT: Two Wrappers Using Display Table Cell

I would comment on your answer but i have too little rep :( anyways...

Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly.

JSFiddle

But yeah, the position:absolute lets you place the div over the img, I read too quickly and thought that you couldn't use position:absolute at all, but seems like you figured it out already. Props!

I'm not going to post the source code, after all its 99% timshutes's work, so please refer to his answer, or just use my jsfiddle link

Update: One Wrapper Using Flexbox

It's been a while, and all the cool kids are using 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+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (-webkit- prefix)

CSS Tricks: a Guide to Flexbox

How to Center in CSS: input how you want your content to be centered, and it outputs how to do it in html and css. The future is here!

Should be noted that the flexbox centering behaves funny when you just center inline text with markup – this gets treated like an `inline-block` element then. — Paracetamol, Jul 22 '16 at 16:17
it's been a while, but this answer is better than my original answer. Thanks for this! — timshutes, Oct 29 '16 at 22:37

score 12 · Answer 2 · answered Jul 19 '13 at 02:04

I figured this one out. I know this will help someone someday.

How to Vertically & Horizontally Center a Div Over a Relatively Positioned Image

The key was a 3rd wrapper. I would vote up any answer that uses less 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;
}

You can see the working jsFiddle here.

score 7 · Answer 3 · edited Feb 03 '17 at 02:15

7

I discovered that the higher the value of 'width' is, the smaller the box width is made and vice versa. I found this out because I had the same problem earlier. So:

.inner-wrapper {
    width: 1%;
}

solves the problem.

edited Feb 03 '17 at 02:15

Robert Columbia

6,313
15
32
40

answered Feb 03 '17 at 02:11

user7508996

71
1
1

Welcome to StackOverflow! While answers are always appreciated, this question was asked 3 years ago, and already had an accepted solution. Please try to avoid 'bumping' questions to the top by providing answers to them, unless the question was not already marked as resolved, or you found a dramatically better alternative approach to the problem :) – Obsidian Age Feb 03 '17 at 02:31
This solution doesn't work when the inner wrapper has any siblings with `display: table-cell` – Zach Saucier Aug 07 '19 at 21:48
probably the quickest solution I have found so far. thanks man. – Dhaval Kakkad May 07 '21 at 07:14

caramba · Answer 4 · 2018-01-31T07:27:56.487

Welcome to 2017 these days will using vW and vH 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>

Derzu · Answer 5 · 2018-07-22T19:15:00.607

1

Your 100% means 100% of the viewport, you can fix that using the vw unit besides the % unit at the width. The problem is that 100vw is related to the viewport, besides % is related to parent tag. Do like that:

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

edited Jul 22 '18 at 19:15

answered Jun 30 '18 at 13:19

Derzu

7,011
3
57
60

score 0 · Answer 6 · edited Jul 19 '13 at 01:54

0

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

edited Jul 19 '13 at 01:54

DACrosby

11,116
3
39
51

answered Jul 19 '13 at 01:19

Hushme

3,108
1
20
26

this solution fixes the horizontal alignment, but not the vertical alignment (which I also want centered). Also, it's sticking in my mind that it's not a best practice to put a float inside of a table-cell element. That might not be true though. – timshutes Jul 19 '13 at 01:23
you want div content centered? – Hushme Jul 19 '13 at 01:24
Not doing it there yet... the text is bunched over to the left. I wanted it centered. I finally solved this. You can see the solution here: http://jsfiddle.net/timshutes/5pAA3/6/ or in the answer above. – timshutes Jul 19 '13 at 02:07

score -3 · Answer 7 · answered May 05 '15 at 17:03

-3

Just add min-height:100% and min-width:100% and it will work. I had the same problem. You don't need a 3th wrapper

answered May 05 '15 at 17:03

Cardinale

97
3
10

Why is width: 100% not working on div {display: table-cell}?

7 Answers7

Linked