案例程式碼：

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