具有动态宽度的中心固定div (CSS)
具有动态宽度的中心固定div (CSS)
提问于 2013-06-12 23:28:54
我有一个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来做这件事，但是有没有一种“更正确”的方法来做这件事呢？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-06-12 23:55:51
可以将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%;
}请参阅此示例工作on this fiddle。
Stack Overflow用户
发布于 2015-07-02 07:18:02
如果您可以安全地使用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如果既要水平居中，又要垂直居中：
.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%);
}Stack Overflow用户
发布于 2013-06-12 23:38:44
<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17069435
复制相关文章
相似问题