我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好,但不是垂直中心。添加position: fixed;后,水平方向甚至没有居中。
以下是完整的一套:
.jqbox_innerhtml {
位置:固定;
宽度:500 px;
身高:200 px;
利润率:5%汽车;
填充:10 px;
边框:5px实体#ccc;
background - color: # fff;
}
< div class = " jqbox_innerhtml”>
这应该在一个水平的
垂直居中的盒子。
< / div >
我如何中心这个框在屏幕与CSS?
添加一个这样的容器:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
然后把你的盒子放入这个div将做的工作。
编辑:正如评论中提到的,内部内容需要设置为display: inline-block,假设有两个div,比如:
<div class="outer">
<div class="inner">
content goes here
</div>
</div>
然后内部的CSS需要是:
.outer {
position: fixed;
text-align: center;
left: 0;
right: 0;
}
.inner {
display: inline-block;
}
加上外部div的left: 0;右:0;text-align: center这将使内部div居中对齐,而不显式地指定内部div的宽度。
我想让一个弹出框的中心与动态宽度和高度的屏幕。
这是一个现代的方法,水平居中一个动态宽度的元素-它在所有现代浏览器;支持可以在这里看到。
更新的例子
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
对于垂直和水平居中,你可以使用以下方法:
更新的例子
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
您可能还希望添加更多的供应商前缀属性(参见示例)。