居中位置：固定元素
我想表明position: fixed; 以动态宽度和高度为中心的弹出框。 我使用margin: 5% auto; 为了这。 无position: fixed; 它水平居中，但不垂直。 添加position: fixed; ，它甚至不是水平居中。
这是完整的集合：
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div> 你基本上需要设置top和left的50%来居中div的左上角。 您还需要将margin-top和margin-left设置为div高度和宽度的负值一半，以将中心移至div的中间位置。
因此，提供了一个<!DOCTYPE html> （标准模式），这应该做到：
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
或者，如果你不关心垂直居中老的浏览器如IE6 / 7，那么你就可以代替也增加left: 0和right: 0有该元素margin-left和margin-right的auto ，从而使具有固定宽度的固定定位元件知道其左右偏移开始的位置。 因此在你的情况下：
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
再说一次，如果你关心IE，这只会在IE8 +中起作用，而且它只在水平方向上不居中。
我想用动态宽度和高度制作一个以屏幕为中心的弹出框。
这是一种用动态宽度横向居中元素的现代方法 - 它适用于所有现代浏览器; 支持可以在这里看到。
更新示例
.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到您的原始CSS中，这会使其表现类似于常规的非固定元素，并且通常的自动余量技术起作用：
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}
请注意，您需要使用有效的（X）HTML DOCTYPE才能在IE中正确运行（当然，您应该有！）！