Image center align vertically and horizontally

http://stackoverflow.com/questions/5481821

by venkatesh pappu

HTML

<h1>X/Y centered image with absolute positioning</h1>
<ul class="wrap">
    <li class="abs"><div class="fill"><img src="//imgur.com/Gduks.gif"></div></li>
    <li class="abs"><div class="fill"><img src="//imgur.com/Gduks.gif"></div></li>
</ul>

<h1>X/Y centered image with line-height</h1>
<ul class="wrap">
    <li class="lnh"><div class="fill"><img src="//imgur.com/Gduks.gif"></div></li>
    <li class="lnh"><div class="fill"><img src="//imgur.com/Gduks.gif"></div></li>
</ul>

<h1>X/Y centered image with display:table-cell</h1>
<ul class="wrap">
    <li class="tbc"><div class="fill"><img src="//imgur.com/Gduks.gif"></div></li>
    <li class="tbc"><div class="fill"><img src="//imgur.com/Gduks.gif"></div></li>
</ul>

CSS

body { background:#eeeeed; text-align:center; font:13px/1.4 'segoe ui', sans-serif; }
h1 { letter-spacing:-.05em; font:700 2em/1.2 'myriad pro', sans-serif; }
img { width:100px; height:100px; }

ul.wrap { width:650px; overflow:hidden; margin:1em auto; }
ul.wrap li { float:left; margin:0 20px 20px 0; border:1px solid #ccc; }
ul.wrap li .fill { width:300px; height:300px; background:#fff; position:relative; }

ul.wrap li.abs .fill {}
/* top and left offsets are half the respective dimensions of the element being positioned */
ul.wrap li.abs .fill img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }

ul.wrap li.lnh .fill { text-align:center; line-height:300px; }
ul.wrap li.lnh .fill img { vertical-align:middle; }

ul.wrap li.tbc .fill { text-align:center; display:table-cell; vertical-align:middle; }