很简单，试试这个

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;

这个方法对我来说效果最好:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

我想让一个弹出框的中心与动态宽度和高度的屏幕。

这是一个现代的方法，水平居中一个动态宽度的元素-它在所有现代浏览器;支持可以在这里看到。

更新的例子

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

对于垂直和水平居中，你可以使用以下方法:

更新的例子

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

您可能还希望添加更多的供应商前缀属性(参见示例)。

如果你的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+中工作，而且只能在水平方向上，而不是垂直方向上。

你基本上可以将它包装到另一个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 >

要确定位置，请使用以下命令:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}