Css 垂直与绝对定位对齐

在下面的代码中，我试图使绿色div.middle元素中的元素垂直对齐到中间

---

我尝试过表格单元格方法，但无法使其工作。我听说这是由于绝对定位，并尝试了此解决方案，但没有成功：

这似乎是由于.table单元格没有高度-我希望它的高度等于其父容器的高度，因为父容器的高度不同

---

jsfiddle：

---

有人知道如何让绿色的div.middle元素垂直对齐到中间吗？任何方法都可以。它只需要能够处理其可变高度。仅仅使用css就可以吗？或者我必须用一点jQuery来跳进去

---

编辑：

“框对齐”也不是一个可行的解决方案，因为它支持浏览器并被新标准所取代

---

CSS

HTML

试验







边栏链接
边栏链接
边栏链接
边栏链接

Lorem ipsum Door sit amet，是一位杰出的献祭者。Mauris dictum tellus viverra neque bibendum在mattis ante Dignessim中。Nam mattis feugiat lorem porttitor Adipising。阿利奎姆·埃拉特·帕特。努克·福吉亚·莫里斯·埃古斯塔斯·尤伊斯莫德大家庭。在hac habitasse Plateum，一句名言。Praesent magna sem，malesuada非发酵级，luctus quis mauris。两人一组，一人一组，一人一组，一人一组。不，不，不，不。在《大屠宰场》一书中，作者是阿古斯塔斯·奎斯（accumsan ac egestas quis）和马萨（dictum vel massa）。大弧生命。梅塞纳坐在阿梅特前庭。整型封建贵族利奥·塞德·奥纳雷。拍卖人ultricies dui，pulvinar tincidunt velit feugiat quis。他们是精英，是生活的源泉

边栏链接
边栏链接
边栏链接

您可以设置该表格单元格的高度

.table-cell{
height: 200px;/* for example */
vertical-align: middle;
display: table-cell;}

<div class="middle"><div class="table-cell"><p>test</p></div></div>

。表格单元格{
高度：200px；/*例如*/
垂直对齐：中间对齐；
显示：表格单元格；}
试验

我以前在垂直对齐属性方面遇到过问题。我倾向于认识到，这个属性似乎更适合桌子。所以我在JSFIDLE上的代码中添加了这个，我觉得还可以。你能看看这对你有用吗

            <div class="middle">
                <table height="100%" width="100%">
                    <tr>
                        <td style="vertical-align:middle">
                            <p>test</p>
                        </td>
                    </tr>
                </table>
            </div>

试验

将带有

显示：table

和

高度：100%

的父div添加到

。table cell

将解决此问题

因此，html结构将是：

   <div class="middle">
        <div class="table">
           <div class="table-cell">
               <p>test</p>
           </div>
        </div>    
  </div>

---

看，我已经修改了

嗯。。。这个单元格的高度是可变的-这是一种将其扩展到其容器的全高的方法吗？谢谢，这工作得很好，但我想我会将答案授予aju，因为他们的代码与我已有的代码相匹配。谢谢

            <div class="middle">
                <table height="100%" width="100%">
                    <tr>
                        <td style="vertical-align:middle">
                            <p>test</p>
                        </td>
                    </tr>
                </table>
            </div>

   <div class="middle">
        <div class="table">
           <div class="table-cell">
               <p>test</p>
           </div>
        </div>    
  </div>

#sidebar .table{
   display:table;
   height:100%;
}