CSS中心500px div的问题

Question

我有一个小部件区域的类，我已经尝试了所有我知道的CSS中心技术.....等等。

我取得了最大的成功：

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

然而，它不适用于各种屏幕宽度。

任何指针都会受到赞赏，因为我很想刷新我的CSS中心。

Answer 1

不确定你的整个结构是什么样子，但如果可行，我建议你这样做：

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

请注意，这会使小部件的宽度固定为500px（不是最大宽度）

Answer 2

我认为你只需要改变两者：

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

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

Answer 3

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

.widget {
   margin: 0 auto;
}