i want to center some inline-block divs. I want to create a responsive design, so if the screen size is too small, the horizontal elements should be under each other.

How can i center them vertical, so they are side by side without a difference in height? (See fiddle).

Moveover those elements should be verticaly centered, if the screen size is too small.

http://jsfiddle.net/5dpRs/52/

CSS

.repeat
{
    display:inline-block;
    border-style:solid;
    border-width:2px;
    height:50px;
    width:50px;
}


#content
{   
    border-style:solid;
    border-width:2px;
    text-align:center;
}

HTML

<div id="content">
    <div class="repeat">
        <p>hello</p>       
    </div>
    <div class="repeat">
    </div>
</div>

Thank you :)