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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (68)

我有一个div,它将具有这个CSS:

#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是否“更正确”呢?

提问于
用户回答回答于

您你以居中fixedabsolute定位的元素设置rightleft0,然后margin-leftmargin-rightauto,如果你是一个中心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%;
}

用户回答回答于

如果你可以安全地使用CSS 3的话,下面是另一种方法transform属性:

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

或者如果你想要水平和垂直对中:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

扫码关注云+社区

领取腾讯云代金券