html - 列表项垂直居中

Question

我读过很多关于垂直居中的文章，但恐怕其中没有多少是直观的，因此无法将其应用于我的问题。基本上，我有一个主 div，其中有一个无序列表，其中包含图像和段落标签，并使用内联 block 显示。这方面的工作还是不错的。

问题或我想要实现的目标是将列表居中于屏幕中间。例如，如果我在列表中只有一项，那么它应该位于中间，然后随着列表中输入更多元素而向上移动。

<div id = "main">
    <ul>
        <li>
            <img src="test.jpg" alt="#" />
            <p>Lorem ipsum</p>          
        </li>
    </ul>
</div>

#main {
    margin: 60px auto;
    height: 400px;
} 
#main ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 13px 72px 22px;
    height: 100px;  
}

#main ul { 
    text-align: center;
}

Answer 1

不太确定您要做什么，但这是一个可能的解决方案。做到这一点的技巧是行高。

编辑:这应该可以......

http://jsfiddle.net/cxmsr/4/

#main
{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
    height: 400px;
    background-color: #999999;
    display: table;
}
#main UL
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#main LI
{
    display: inline-block;
    background-color: #CCC;
    margin: 2px 2px 6px;
    height: 100px;
}

您可以将#main 宽度更改为 100% 或任何您需要的值。