我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好，但不是垂直中心。添加position: fixed;后，水平方向甚至没有居中。
以下是完整的一套:
.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >
我如何中心这个框在屏幕与CSS?
当前回答
我就用这样的方法:
.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)。
其他回答
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定义宽度和高度。
http://jsfiddle.net/4Ly4B/33/
而不是计算弹出窗口的大小，减去一半到顶部，javascript正在调整popupContainer的大小以填充整个屏幕…
(100%高度，使用display:table-cell时不起作用;(需要将某物垂直居中))…
不管怎样，它是有效的:)
唯一可靠的解决方案是使用表align=center，如下所示:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
我无法相信世界各地的人们浪费这么多愚蠢的时间来解决这样一个基本的问题，如集中一个div. css解决方案并不适用于所有浏览器，jquery解决方案是一个软件计算解决方案，并不是一个其他原因的选择。
我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再这样做了。使用表格为div居中。在所有浏览器中都有效!再也不用担心了。
我用的方法很简单。例如，我有一个定位:固定的导航条，所以我调整它，在边缘留下一个小空间，像这样。
nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}
其思想是取宽度的剩余百分比(在本例中为2%)并使用它的一半。
我就用这样的方法:
.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)。
