So I'm trying to vertically center an image for portrait viewports first.

My code is behaving strangely though so I've stripped it down to it's bare basics. It's working strangely in that there doesn't seem to be consistency across browsers:

Local Remote
Opr: Y Y
Saf: Y Y
FFx: N N
Chr: N Y

(With Y = works as expected, img is centered & N = img is pushed to the bottom, outside the the viewport)

In other words, it works in Opera and Safari but does not work in Firefox. In Chrome it only works when the file is remote.

Very confused about why this would be as I'm not using any server-side languages, it's literally been stripped down to the following HTML/CSS:

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css">
body {
	width: 100%;
	height:100%;
}

#container {
  display:block;
  text-align: center;
  margin: 0;
  position:absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
}

#container::before {
  content: '';
  display: inline-block;
  height:100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

#contentDiv {
  display: inline-block;
  vertical-align:middle;
  width:100%;
  height: auto;
}
  
#container img {
  display:block;
  max-width: 100%;
  height: auto
}
  </style>
</head>
<body>
<div id="container" role="main">
  <div id="contentDiv">
  <img class="content" src="http://placehold.it/1200x900" />
  </div>
</div>  
</body>
</html>
Any help on what's causing this confusing bug is greatly appreciated.