此方法不使用任何变换。因此，输出变得模糊没有问题。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

垂直和水平居中

HTML

<div id="dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

享受

以下是我的案例，并在Firefox中进行了测试。

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

div的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时，我会使用它，因为这两个元素都位于水平内联位置。

.center{
    display: grid;
    place-items: center;
}

实际上，垂直居中需要两个div。包含内容的div必须具有宽度和高度。

#集装箱{位置：绝对；顶部：50%；页边空白：-200像素；/*#内容高度的一半*/左：0；宽度：100%；}#内容{宽度：624px；左边距：自动；右边距：自动；高度：395px；边框：1px实心#000000；}<div id=“container”><div id=“content”><h1>居中的div</h1></div></div>

这是结果。

经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}