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  amp  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   lt ul gt       lt li gt           lt img src     gt           lt div class  outer-wrapper  gt               lt div class  inner-wrapper  gt                   lt h1 gt My Title lt  h1 gt                   lt h5 gt Subtitle lt  h5 gt               lt  div gt           lt  div gt       lt  li gt   lt  ul gt    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

User · Answer

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

User · Answer

Welcome to 2017 these days will  using vW and vH do the trick   x000D   x000D  html  body   x000D      margin  0  padding  0  x000D      width  100   height  100   x000D    x000D   x000D  ul   x000D      background   CCC  x000D      height  100   x000D      width  100   x000D      list-style-position  outside  x000D      margin  0  padding  0  x000D    x000D   x000D  li   x000D      width  100   x000D      display  table  x000D    x000D   x000D  img   x000D      width  100   x000D      height  410px  x000D    x000D   x000D   outer-wrapper   x000D      position  absolute  x000D      width  100   x000D      height  100   x000D      top  0  x000D      margin  0  padding  0  x000D    x000D   x000D   inner-wrapper   x000D      display  table-cell  x000D      vertical-align  middle  x000D      text-align  center  x000D      width  100vw     only change is here     to  vw       x000D      height  100vh     only change is here     to  vh       x000D    x000D   lt ul gt  x000D       lt li gt  x000D           lt img src     gt  x000D           lt div class  outer-wrapper  gt  x000D               lt div class  inner-wrapper  gt  x000D                   lt h1 gt My Title lt  h1 gt  x000D                   lt h5 gt Subtitle lt  h5 gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

I figured this one out   I know this will help someone someday   How to Vertically  amp  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   lt div class  wrapper  gt       lt img src  my-slide jpg  gt       lt div class  outer-wrapper  gt           lt div class  table-wrapper  gt               lt div class  table-cell-wrapper  gt                   lt h1 gt My Title lt  h1 gt                   lt p gt Subtitle lt  p gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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    lt div style  display  flex  flex-direction  column  justify-content  center  align-items  center   gt      stuff to be centered  lt  div gt    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

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to vertical-alignment

Examples related to flexslider

Examples related to css-tables