500px div的CSS居中問題

Question

我有一個小部件區域的類，我已經嘗試了我所知道的每一個CSS居中技術......等等。

我已經受夠了最成功的：

.widget { 
    max-width: 500px; 
    margin-left: 50%; 
    margin-right: auto; 
} 

但是它並沒有對各種屏幕寬度的工作。

任何指針，將不勝感激，因爲我想刷我的CSS集中。

Answer 1

我想你只需要改變兩個：

margin-left: auto; 
margin-right: auto; 

和小提琴演示：http://jsfiddle.net/0zgrf49j/

Answer 2

不知道你的整個結構看起來像什麼，但如果該作品，我會建議只是在做：

.widget { 
    width: 500px; 
    margin-left: calc(50% - 250px); 
} 

注意，這是保持微件具有500像素的固定寬度（未最大寬度）

Answer 3

沒有剩下的代碼就很難給出具體的答案，但這是一種流行的技術：

.widget { 
    margin: 0 auto; 
}