垂直对齐绝对定位(Vertical Align with Absolute Positioning)

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

我已经试过了表细胞的方法，但不能得到它的工作。我听说这是由于绝对定位，并试图用没有运气此解决方案： CSS -垂直对齐表格的单元格不具有绝对的位置工作

这似乎是由于没有高度。表细胞 - 我想这是高度等于它的父容器，它的高度变化。

的jsfiddle：

http://jsfiddle.net/q5jKM/1/

有谁知道获得绿色div.middle元素垂直对齐到中间的一种方式？任何方法都行。它只是需要能够处理其可变高度。是否有可能只用CSS？或者将我有一点的jQuery跳吗？

编辑：

框对齐也不是由于浏览器的支持，并与新的标准被替换一个可行的解决方案。

CSS

     html,body{height:100%;margin:0}
#sidebar {
    width: 22em;
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index:2;
    color: #ffffff;
    background-color: #333333;  
    overflow:auto;
    height: 100%;
}

#sidebar .nav {
    width: 3em;
    float: right;
    background-color: #2e2e2e;
    border-left: 2px groove #454545;
    height: 100%;
    position:relative;
    min-height:34em;    
}

#sidebar .content {
    height: 100%; 
    width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    float:left; 
    position:relative;
    min-height:34em;
}

#sidebar .top {
    position:absolute;
    top:0;
}
#sidebar .bottom {
    position:absolute;
    bottom:0;
}

#sidebar .middle {
    position: absolute;
    bottom: 12em;       /*  3.125*3  */
    top: 16em;          /*  3.125*4  */
    background: green;
}

.content .middle {
    overflow:auto;
}


#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/


    /*table-cell trying get vertical-align working*/
#sidebar .table-cell {display:table-cell; vertical-align: middle; }



#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}

#sidebar ul {margin:0; padding: 0;}









#sidebar .nav li {
    padding: .5625em;
    list-style:none;
}
#sidebar .nav li img {
    height: 1.875em;
    width: 1.875em
}

#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top:  2px groove #454545 }




.content li {
    position:relative;
    display:block;
    background-color: #444;
    padding: .72em;
    border-radius: .8em;
    border-bottom: 1px solid #292929;
    border-top: 1px solid #4c4c4c;
    text-align: center;
    font-size: 1em;
    letter-spacing: .1em;
    font-weight: normal;
    height: 1.2em;
}

.content li:after {
    content:"";
    position:absolute;
    display:block; 
    width:0;
    top:.11em; /* controls vertical position */
    right:-.852em; /* value = - border-left-width - border-right-width */
    border-style:solid;
    border-width:1.2em 0 1.2em 1.2em;
    border-color:transparent #444;
}

.content .top li{margin: .95em 0 1.9em 0;}
.content .bottom li{margin: 1.9em 0 .95em 0;}

.content .logo {
    text-align: center;
    padding: 1em 0 2em 0;
    width: 100%;
    border-bottom: 2px groove #454545;
}
.content p.welcome {
    text-align: center;
    line-height: 1.5em;
    margin: 1em 0;
}

HTML

<div id="sidebar">


            <div class="nav">
            <div class="top">
            <ul>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
            </ul>
            </div>
            <div class="middle"><div class="table-cell"><p>test</p></div></div>
            <div class="bottom">
            <ul>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
            </ul>
            </div>
            </div>



            <div class="content">
                <div class="top">
                <ul>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                </ul>
                </div>
                <div class="middle"><div class="table-cell">
                <div class="logo"><img src="_images/g.svg"></div>
                <p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
                </div></div>
                <div class="bottom">
                <ul>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                </ul>
                </div>
                </div>
    </div>

Answer 1:

添加父分度display:table和height:100%到.table-cell将解决此

所以HTML结构时便会：

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

添加此风格：

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

见的jsfiddle我已经修改

Answer 2:

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

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

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

Answer 3:

我曾经有过与之前vertical-align属性的问题。我倾向于意识到这个属性似乎更适合于表。所以，我在的jsfiddle你的代码添加了这个，它看起来正常的我。你可以看到，如果这将与你的工作？

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