Is it possible to solve this? Vertical align question

I have a parent, that is 100% viewport height, and in this I have an img, the img size is to its parent.
Is there any way to vertically center the image without having to use static height and width for it?


Try use the css code from this example:

<style type="text/css"><!--
div.container {
 height: 12em;
 border: 2px dotted blue;
 display: table-cell;           /* forms as a table cell */
 vertical-align: middle;        /* center vertically */
 text-align: center;            /* center horizontally */
 padding: 3px 4px;

<div class="container">
 <img src="image.jpg" alt="Text for image" width="120" height="60" /><br/>
 This line of text and the image above are vertically and horizontally centered.

Your link isn’t working I’m afraid.

As mentioned above you can use display:table-cell to vertically align content and will work in IE8+ (+all non IE).

Isn’t this the same question you answered in this thread which received much the same answer ?

No it is not the same, at least I don’t think so.

Now I want to vertically center a dynamic image, the image-size is responsive to its parent, which is 100% viewport height. The image has 70% width as its only size-value.
I have tried using table, table-cell but it doesn’t seem to work in this case.

height: 100%;
display: table;

width: 70%;
display: table-cell;
vertical-align: middle;

Do you suppose you can post another link to codepen? or maybe the same code in a working page (starts with <doctype, ends with </html>) here?

The image would need to be in a container as display:table-cell won’t work for an image as it isn’t a container for content (its a replaced element). Place the image in a container that is display:table-cell.

working example:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
.parent {
	height: 100%;
	display: table;
.child {
	display: table-cell;
	vertical-align: middle;
img {
	width: 70%;
	vertical-align: middle;

<!-- IE8+ only (+ all other modern browsers)-->
<div class="parent">
		<div class="child"><img src="" alt="vertical image"></div>