css---父元素高度不确定，如何通过css样式垂直居中

案例代码：

<div id='box'>
    <section class='boxLeft'>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </section>
    <section class='boxRight'>
        列表
    </section>
</div>

如上：boxLeft中li的个数不确定，如何使boxRight自适应上下居中？
css样式代码：

#box{position:relative}
.boxLeft{padding:20px 0;}
.boxLeft li{
    height:20px;
}
.boxRight{
    position:absolute;
    right:0;
    height:20px;
    line-height:20px;
    top:50%;
    margin-top:-10px;
}