中心固定div动态宽度(CSS)

前端之家收集整理的这篇文章主要介绍了中心固定div动态宽度(CSS)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div,将有这个CSS:
#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

现在,我如何使这个div居中?我可以使用margin-left:-450px;左:50%;但是这将仅在屏幕> 900像素。之后(当窗口<900像素时),它将不再居中。 我当然可以用某种js做到这一点,但是有一个“更正确的”这样做与CSS?

解决方法

您可以将固定或绝对定位元素设置向右和向左居中为0,然后将margin-left& margin-right to auto,如同你以一个静态定位的元素为中心。
#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

看到这个例子工作on this fiddle

猜你在找的CSS相关文章