500px div 的 CSS 居中问题

Question

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

我最成功的是:

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

但是它不适用于各种屏幕宽度。

任何指针都将不胜感激，因为我很想重温我的 CSS 居中。

Answer 1

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

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

请注意，这使小部件保持固定宽度 500px(不是最大宽度)