500px div的CSS居中问题

Question

我有一个小部件区域的类，我已经尝试了每一个CSS居中技术，我know.....and更多。

我取得了最大的成功：

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

然而，它在各种屏幕宽度上都不起作用。

任何指针将不胜感激，因为我喜欢刷我的CSS居中。

Answer 1

我不确定你的整个结构是什么样子的，但如果它起作用了，我建议你直接这样做：

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

请注意，这会使小部件保持500px的固定宽度(而不是max- width )

Answer 2

我认为你只需要改变这两个：

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

还有一件小提琴要演示：http://jsfiddle.net/0zgrf49j/

Answer 3

如果没有其余的代码，很难给出一个具体的答案，但这是一种流行的技术：

.widget {
   margin: 0 auto;
}