How to center the title based on the viewport width (css3) - html

Question

I have this situation in which I have a header with on the left a logo and on the right some user info (like an avatar). Important to understand is that the width of the logo and the user element are not the same!
So, in the middle of the header I have a title, something like this:
<header>
<img class="logo" src="http://file.png">
<div class="user"> </div>
<h1>This is the title</h1>
</header>
I have create a DEMO
Although this header works great if you resize the area (with ellipses), however, the title is not in the middle of the screen/viewport.
So the question is, considering the behaviour when resizing, is it possible to center the title based on the viewport width ?
UPDATE: Based on the work done by Hassan Ahmad (see below) I've updated the DEMO. This is exactly what I need, but as mentioned already, the media query makes this solution a bit hacky. Any suggestions how to achieve the same without a media query ?

Answer 1

How about this css:
header {
position: relative;
height: 50px;
background-color: lightgrey;
text-align: center;
}
.logo {
position: absolute; top: 0; left: 0;
height: 50px;
width: 300px;
}
.user {
position: absolute; top: 0; right: 0;
width: 50px;
height: 50px;
background-color: red;
}
edit:
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 50px;
}
#media only screen and (max-width: 820px){
.logo { position: static; float: left; }
}