Question

我正在尝试将固定位置div标签浮动到浏览器的中心，即使在调整浏览器大小时也保持居中。我可以让它居中，但是当浏览器调整大小时它会向左移动，因为用于使其居中的边距。

是否有一个CSS技巧可以用来制作保证金顶部＆amp;保证金左边动态？我还希望将容器的宽度设置为90％。

#conntainer {
position:fixed;
width: 17028px; /* would like this to be width: 90%; */
height: 798px;
top: 50%;
left: 50%;
margin-top: -145px;
margin-left: -864px;
z-index: 100; 
}

Answer 1

请改用：

#conntainer {
    position:fixed;
    width: 90%;
    height: 798px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    z-index: 100; 
}

<强> jsFiddle example

Answer 2

改为使用CSS转换。

#conntainer {
    position:fixed;
    width: 90%;
    height: 798px;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
}

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/vbdCz/

这种方法的优势在于它还集中了动态高度属性......尽管从你的例子中可以看出你无论如何都会坚持固定的高度:)（在这种情况下，使用自动左/右边距而不是变换就足够了。

p / s：您可能希望将供应商前缀（实际上只是-webkit-）添加到CSS transform属性。

可调整大小的居中div标签，固定位置

2 个答案: