如何根據視口寬度居中標題（css3）

Question

我有這種情況，我在左邊有一個徽標，右邊有一些用戶信息（如頭像）。重要的是要理解的是，徽標和用戶元素的寬度不一樣！

所以，在頭的中間我有一個標題，是這樣的：

<header> 
    <img class="logo" src="http://file.png"> 
    <div class="user"> </div> 

    <h1>This is the title</h1> 
</header> 

我已創建一個DEMO

雖然這個頭如果調整該地區的偉大工程（用省略號），但是，標題不在屏幕/視口的中間。

所以問題是，考慮到調整大小時的行爲，是否有可能根據視口寬度居中標題？

更新：根據Hassan Ahmad所做的工作（見下文），我更新了DEMO。這正是我所需要的，但正如前面提到的，媒體查詢使得這個解決方案有點怪異。任何建議如何實現沒有媒體查詢相同？

Answer 1

這個怎麼樣的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; 

} 

編輯：

h1 { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-right: 50px; 
} 

@media only screen and (max-width: 820px){ 
    .logo { position: static; float: left; } 
}