Question

I have read many articles about vertical centering but I’m afraid not many of them are intuitive, hence unable to apply it to my problem. Basically, I have a main div and in there, I’ve got unordered list which has an image and paragraph tag within it and are displayed using inline-block. This aspect of the work is fine.

The problem or what I am trying to achieve is to have the list centered in the middle of the screen. So for instance, if I have got just one item in the list, it should be in the middle and then move upwards as more items are entered in the list.

<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

Not exactly sure what you’re trying to do but here is a possible solution. The trick to this is the line-height.

EDIT: This should do it…

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

You can change the #main width to 100% or whatever you need.