Существует способ сделать это, не занимая математических или жестких позиций для каждого человека img в зависимости от его размера.
Конечно, есть большой компромисс - разметка требует, чтобы каждые img были обернуты в 2 div с. Но тогда вам не нужно обновлять CSS каждый раз, когда вы добавляете (или удаляете) img.
<html>
<head>
<style type="text/css">
/**
* omit styles for 'div#i' if centering on page
*/
div#i {
position: relative;
/**
* set any positioning or sizing, just make
* sure that 'height' or 'min-height' is set
*/
height: 99.44%;
}
div#i>div {
/**
* for the outer div of each img, put its upper-
* left corner in the center (50%, 50%) of div#i
*/
position: absolute;
left: 50%;
top: 50%;
}
div#i>div>div {
/**
* the inner div of each img will be the same size
* as the img itself, so these 50% values refer to
* half the img width and height; move the center of
* this inner div to upper-left corner of outer div
*/
margin-left: -50%;
margin-top: -50%;
display: inline-block;
}
div#i>div>div>img {
/**
* this plus the above inline-block style will
* vertically center img within the inner div
* (normally it's baseline-aligned)
*/
vertical-align: middle;
}
</style>
</head>
<body>
<div id="i">
<div>
<div>
<img src="a.png">
</div>
</div>
<div>
<div>
<img src="b.png">
</div>
</div>
<div>
<div>
<img src="c.png">
</div>
</div>
<!--
etc.
-->
</div>
</body>
</html>