display：table-cell在100％宽度下无法正常工作

Question

I wanted to align text vertically inside of div :

display:table-cell;
vertical-align: middle;

Text is getting aligned, but div (which has 100% width) becomes smaller in width. What is the problem? Is there any other good way to align vertically?

EDIT: little more HTML code:

 <div style="position:absolute;top:40%;left:0%;">
  <div id="posts" style="position:relative;">
    <div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em"></div>
   <div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em"></div>
  </div>
</div>

Answer 1

An element displayed as table-cell without any parent explicitly displayed as table will create its own shadowy parent displayed as such (and another in-between set as table-row ). It's nowhere to be seen in the DOM but it still have an effect.

The default table layout algorithm is table-layout: auto and you want table-layout: fixed : former layout algorithm will adapt dimensions of cells to your content; latter will respect what the author (you) says for widths. You can test by having very little content in 1 "cell" and then a very long multi-line content.

#posts {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
}

You also should remove or adapt widths on cells: total should be 100% or else it'll be proportional on most browsers (Safari being at risk. Maybe not Saf 8 but 6 at least...)

Answer 2

I have updated your code to get it to work:

<div style="position:absolute;top:40%;left:0%;width:100%;">
  <div id="posts "style="position:relative;width:100%;">
    <div style="display:table; width:100%;">
     <div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em;text-align:center;">test

   </div>
  </div>
</div>

What you needed was to add a div with display: table in and set all the containing elements to 100% width . Also the div you are centring needed a text-align: center .