我有一个将拥有此CSS的div:
#some_kind_of_popup
{
position: fixed;
top: 100px;
min-height: 300px;
width: 90%;
max-width: 900px;
}
现在,我怎样才能使这个div居中?我可以使用margin-left: -450px; left: 50%;
但这仅在屏幕为&gt;时才有效900像素。之后(当窗口<900像素时),它将不再居中。
我当然可以用某种js来做这件事,但是用CSS做“更正确”吗?
答案 0 :(得分:202)
您可以将fixed
或absolute
定位元素设置right
和left
置于0
,然后margin-left
&amp; 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%;
}
答案 1 :(得分:43)
如果您可以安全地使用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%);
}
答案 2 :(得分:6)
<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;
}
答案 3 :(得分:1)
无论内容大小如何,都可以使用
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
来源:https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
答案 4 :(得分:1)
这种方法在 flexbox 中使用边距时不会限制元素的宽度
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
也用于垂直居中
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));