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; 
}