Vertically centering an image

**molendijk** · 11-17-2013, 12:27 PM

Using jquery we can put an image having NO VALUE FOR ITS HEIGHT in the vertical middle of the window. Example:

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function vert_middle()
{
$('#funes').css('top', '50%');
$('#funes').css('margin-top', -$('#funes').height()/2+'px')
}
window.onload=vert_middle
window.onresize=vert_middle
</script>
</head>

<body>
<img id="funes" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="position: absolute; left: 45%; width: 10% ">
</body>

Does anyone know if this is possible with css alone?
Thanks.

**jscheuer1** · 11-17-2013, 01:30 PM

With a table and css only:

HTML Code:

<!DOCTYPE html>
<head>
<style type="text/css">
html, body, table, td {width: 100%; height: 100%; text-align: center; overflow: hidden; margin: 0; padding: 0;}
</style>
 </head>

 <body>
 <table>
<tr>
<td><img id="funes" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 10%;"></td>
</tr>
</table>

 </body>

**molendijk** · 11-17-2013, 02:49 PM

Of course, tables!
I didn't want overflow: hidden, so I changed it to this, which seems to work fine.

<!DOCTYPE html>
<head><meta charset="utf-8"> <title> </title></head>
<body>


<table style="position: fixed; left: 45%; top: 0; width: 10%; height: 100%; margin: 0; padding: 0; ">
<tr>
<td>
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 100%;"> 
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 140%; margin-left: -20%"> 
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 80%; margin-left: 10%"> 
</td>
</tr>
</table>

funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funesfunes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes fun es funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes funes f unes funes funes funes 

</body></html>