Html 具有动态宽度的中心固定 div (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17069435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center fixed div with dynamic width (CSS)
提问by gubbfett
I have a div that will have this CSS:
我有一个带有这个 CSS 的 div：
#some_kind_of_popup
{
position: fixed;
top: 100px;
min-height: 300px;
width: 90%;
max-width: 900px;
}
Now, how can i make this div centered? I can use margin-left: -450px; left: 50%;but this will only work when the screen is > 900 pixels. After that (when the window is < 900 pixels), it will no longer be centered.
现在，我怎样才能使这个 div 居中？我可以使用，margin-left: -450px; left: 50%;但这仅在屏幕 > 900 像素时才有效。之后（当窗口小于 900 像素时），它将不再居中。
I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?
我当然可以用某种 js 来做到这一点，但是用 CSS 做到这一点是否“更正确”？
回答by laconbass
You can center a fixedor absolutepositioned element setting rightand leftto 0, and then margin-left& margin-rightto autoas if you were centering a staticpositioned element.
您可以将fixed或absolute定位元素设置right和leftto居中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%;
}
See this example working on this fiddle.
看到这个例子在这个小提琴上工作。
回答by Alan Bellows
Here's another method if you can safely use CSS3's transformproperty:
如果您可以安全地使用 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%);
}
...or if you want both horizontal AND vertical centering:
...或者如果你想要水平和垂直居中：
.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%);
}
回答by Mathew Berg
<div id="container">
<div id="some_kind_of_popup">
center me
</div>
</div>
You'd need to wrap it in a container. here's the css
你需要把它包在一个容器里。这是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;
}
回答by Leonardo
This works regardless of the size of its contents
无论其内容的大小如何，这都有效
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
source: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
来源：https: //css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
