Html 显示：表格单元格不显示'；t在100%宽度下工作正常

我想在

div

中垂直对齐文本：

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

文本正在对齐，但

div

（宽度为100%）的宽度变小。有什么问题？有没有其他垂直对齐的好方法

编辑：再多一点HTML代码：

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

---

我已更新了您的代码以使其正常工作：

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

测试

---

您需要添加一个带有

display:table

的

div

，并将所有包含的元素设置为

100%宽度

。另外，要居中的

div

需要一个

文本对齐：居中

一个显示为

表格单元格

的元素，没有任何父元素显式显示为

表格

，它将创建自己的阴影父元素（中间的另一个设置为

表格行

）。在DOM中看不到它，但它仍然有效果

默认的表格布局算法是

表格布局：auto

，您需要

表格布局：fixed

：以前的布局算法将使单元格的尺寸适应您的内容；后者会尊重作者（你）所说的宽度。您可以通过在一个“单元格”中包含很少的内容，然后是很长的多行内容来进行测试

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

---

您还应该删除或调整单元格的宽度：总计应为100%，否则在大多数浏览器上都会成比例（Safari面临风险。可能不是Saf 8，但至少是6…）

是否有

填充
或
单元格填充
？我们可以看到您的html吗？@PHPglue否，没有最可能的原因是这个div受到页面上其他元素的影响。如果没有html，很难确认这一点。您能通过浏览器查看页面源代码并复制粘贴以向我们展示您拥有的内容吗？
？这一条解释得很好，
表格布局：修复了
救了我的命lol