Question

求css中li上下垂直居中的写法，有示意图,求解答！~

求CSS写法！~

Answer 1

#A { position: absolute; width: 120px; left: 0; top: 0; bottom: 0; border: 1px solid #000; display: table; height: 100%; }
            #A ul { list-style: none; margin: 0; padding: 0; border: 1px solid red; display: table-cell; vertical-align: middle; }
                #A ul li { border: 1px solid green; text-align: center; }

<div id="A">
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
        </ul>
    </div>

Answer 2

div {
width: 100px;
height: 600px;
display: table-cell;
vertical-align: middle;
}
ul {
width: 100%;
height: 50%;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
height: 20%;
}

li中如果还需要居中的话里面再套一层display:table-cell的容器
兼容所有现代浏览器