用dynamic宽度居中固定div（CSS）

我有一个将有这个CSS的div：

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

现在，我怎样才能使这个div居中？ 我可以使用margin-left: -450px; left: 50%; margin-left: -450px; left: 50%; 但是这只在屏幕> 900像素时才起作用。 之后（当窗口<900像素），它将不再居中。

我当然可以用某种types的js来做这个，但是用CSS来做这个更“正确”吗？

Answer 1

您可以将fixed或absolute定位的元素设置left margin-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%; } 

看这个例子在这个小提琴上工作。

Answer 2

如果您可以安全地使用CSS3的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%); } 

Answer 3

 <div id="container"> <div id="some_kind_of_popup"> center me </div> </div> 

你需要把它包装在一个容器中。 这是CSS

 #container{ position: fixed; top: 100px; width: 100%; text-align: center; } #some_kind_of_popup{ display:inline-block; width: 90%; max-width: 900px; min-height: 300px; }