我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金: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有一个已知的宽度和高度，那么你基本上需要将top和left设置为50%，以使div的左上角居中。你还需要将margin-top和margin-left设置为div高度和宽度的负一半，以将中心移向div的中间。
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
或者，如果你的div有一个动态的/未定义的宽度和/或高度，那么不是边距，而是将变换设置为div的相对宽度和高度的负一半。
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
或者，如果你的div至少有一个固定的宽度，你不关心垂直居中和老式浏览器(如IE6/7)，那么你也可以添加left: 0和right: 0到具有margin-left和margin-right为auto的元素，这样具有固定宽度的固定定位元素就知道它的左右偏移量从哪里开始。在你的情况下:
position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
同样，如果你关心IE的话，这个功能只能在IE8+中工作，而且只能在水平方向上，而不是垂直方向上。
其他回答
试着用这个方法来处理水平元素的居中不正确。
Width: calc (Width: 100% -其他任何偏离中心的宽度)
例如，如果你的侧导航栏是200px:
width: calc(100% - 200px);
唯一可靠的解决方案是使用表align=center，如下所示:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
我无法相信世界各地的人们浪费这么多愚蠢的时间来解决这样一个基本的问题，如集中一个div. css解决方案并不适用于所有浏览器，jquery解决方案是一个软件计算解决方案，并不是一个其他原因的选择。
我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再这样做了。使用表格为div居中。在所有浏览器中都有效!再也不用担心了。
另一个简单的解决方案是将元素的宽度设置为fit-content，并将左右设置为0px;
width: fit-content;
position: fixed;
left: 0px;
right: 0px;
如果您不知道元素的宽度，这是很有用的。
当你不知道你正在居中的东西的大小，而你想让它在所有屏幕尺寸中居中时，这个方法非常有效:
.modal {
position: fixed;
width: 90%;
height: 90%;
top: 5%; /* (100 - height) / 2 */
left: 5%; /* (100 - width) / 2 */
}
这个解决方案不需要你为弹出式div定义宽度和高度。
http://jsfiddle.net/4Ly4B/33/
而不是计算弹出窗口的大小，减去一半到顶部，javascript正在调整popupContainer的大小以填充整个屏幕…
(100%高度，使用display:table-cell时不起作用;(需要将某物垂直居中))…
不管怎样，它是有效的:)
