中心固定div具有动态宽度（CSS）

Question

我有一个将具有此CSS的div：

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

现在，如何才能使该div居中？我可以使用，margin-left: -450px; left: 50%;但是只有在屏幕大于900像素时才能使用。之后（当窗口<900像素时），它将不再居中。

我当然可以用某种js来做到这一点，但是用CSS做到这一点“更正确”吗？

Answer 1

您可以居中fixed或absolute定位的元素设置right和left到0，然后margin-left与margin- right以auto，如果你是一个中心static定位的元素。

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}