用动态宽度居中固定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像素）时，它将不再居中。
我当然可以用某种类型的js来做这件事，但是用CSS来做这件事更“正确”吗？
您可以居中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%;
}
看到这个例子在这个小提琴上工作。
如果您可以安全地使用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%);
}
<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;
}