我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金: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 */
}
其他回答
我想让一个弹出框的中心与动态宽度和高度的屏幕。
这是一个现代的方法，水平居中一个动态宽度的元素-它在所有现代浏览器;支持可以在这里看到。
更新的例子
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
对于垂直和水平居中，你可以使用以下方法:
更新的例子
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
您可能还希望添加更多的供应商前缀属性(参见示例)。
left: 0;
right: 0;
在IE7下无法工作。
更改为
left:auto;
right:auto;
开始工作，但在其他浏览器停止工作! 下面在IE7中使用这种方法
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
你基本上可以将它包装到另一个div中，并将其位置设置为fixed。
.bg { 位置:固定; 宽度:100%; ｝ .jqbox_innerhtml { 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " bg”> < div class = " jqbox_innerhtml”> 这应该在一个水平和垂直居中的盒子里。 < / div > < / div >
添加:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
另一个简单的解决方案是将元素的宽度设置为fit-content，并将左右设置为0px;
width: fit-content;
position: fixed;
left: 0px;
right: 0px;
如果您不知道元素的宽度，这是很有用的。
