css - 居中一个位置:fixed element

Question

我想制作一个以屏幕为中心的具有动态宽度和高度的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>

如何使用 CSS 将此框居中放置在屏幕中？

Answer 1

如果您的 div 具有已知的宽度和高度，那么您基本上需要将 top 和 left 设置为 50% 以使左侧居中-div 的顶 Angular 。您还需要将 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 具有动态/未定义的宽度和/或高度，则将 transform 设置为 div 相对宽度的负一半，而不是 margin宽度和高度。

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

或者，如果您的 div 至少有一个固定宽度，并且您不关心垂直居中和旧浏览器(如 IE6/7)，那么您也可以添加 left: 0 和 right: 0 到具有 auto 的 margin-left 和 margin-right 的元素，以便固定定位具有固定宽度的元素知道它的左右偏移量从哪里开始。在您的情况下:

position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

同样，如果您关心 IE，这仅适用于 IE8+，并且它仅水平居中，而非垂直居中。