我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好，但不是垂直中心。添加position: fixed;后，水平方向甚至没有居中。
以下是完整的一套:
.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >
我如何中心这个框在屏幕与CSS?
当前回答
当你不知道你正在居中的东西的大小，而你想让它在所有屏幕尺寸中居中时，这个方法非常有效:
.modal {
position: fixed;
width: 90%;
height: 90%;
top: 5%; /* (100 - height) / 2 */
left: 5%; /* (100 - width) / 2 */
}
其他回答
这个方法对我来说效果最好:
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
添加一个这样的容器:
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%);
}
您可能还希望添加更多的供应商前缀属性(参见示例)。
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
在它里面可以是任何有差异宽度，高度或没有的元素。 全部居中。
我就用这样的方法:
.c-dialogbox {
--width: 56rem;
--height: 32rem;
position: fixed;
width: var(--width);
height: var(--height);
left: calc( ( 100% - var(--width) ) / 2 );
right: calc( ( 100% - var(--width) ) / 2 );
top: calc( ( 100% - var(--height) ) / 2 );
bottom: calc( ( 100% - var(--height) ) / 2 );
}
它为我设置了水平和垂直的对话框中心，我可以使用不同的宽度和高度来适应不同的屏幕分辨率，以使其具有媒体查询的响应性。
如果您仍然需要为不支持CSS自定义属性或calc()的浏览器提供支持，则不可取(请检查caniuse)。
