Bilder horizontal und vertikal zentriert ausrichten

Wer eine Bildergalerie erstellt stand sicher auch schon mal vor dem Problem, dass bei einer Umsetzung ohne Tabelle die Bilder nicht einfach horizontal und vertikal zentriert werden können. Hier eine Lösung für dieses Problem:

Stylesheet

<style type="text/css">
 .imageholder { 
    float: left;
    margin: 5px; 
    position:relative; 
    display:table; 
    height: 200px; 
    width: 200px; 
    vertical-align: middle; 
    text-align: center; 
    border: 1px solid #CCCCCC; 
    text-align:center;
 }
 .inner { 
    width:100%; 
    display:table-cell; 
    vertical-align:middle; 
    position:relative; 
    text-align:center;
 } 
 .inner img{ 
    display:inline; 
    vertical-align:middle; 
 } 
</style> 
<!--[if lt IE 8]> 
<style type="text/css">
 .imageholder{overflow:hidden}
 .imageholder,.inner{display:block}
 .inner {top:50%;left:0;}
 .inner img{top:-50%; position:relative;display:block}
 </style>
 <![endif] -->

HTML-Code

<div class="imageholder">
    <div class="inner">
        <img src="bild1.jpg" alt="Img" width="180" height="135" />
    </div>
</div>
<div class="imageholder">
    <div class="inner">
        <img src="bild2.jpg" alt="Img" width="135" height="180" />
    </div> 
</div> 
<div class="imageholder"> 
    <div class="inner">
        <img src="bild3.jpg" alt="Img" width="100" height="150" />
    </div>
</div> 
<div class="imageholder">
    <div class="inner">
        <img src="bild4.jpg" alt="Img" width="180" height="100" />
    </div> 
</div>