可以使用百分比来居中和设置元素宽度

Question

我试图以百分比为中心，但它不起作用！我错过了什么或者我不可能这样做的方式吗？

当我使用此设置时，该元素几乎触及浏览器区域的顶部。

.modal-box {
    position: fixed;
    z-index: 1000;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    margin-top: -25%;
    margin-left: -25%;  
}

Answer 1

为什么要添加

margin-top: -25%;
margin-left: -25;   

否定了你想要达到的position: fixed。删除这两行，您将看到如何获得元素的固定位置。

Answer 2

如果您希望它相对于视口（无论父级），请使用viewport-relative-lengths

＆＃13;

＆＃13;

.modal-box {
    border: 1px solid #000; 
    position: fixed;
    z-index: 1000;
    width: 50vw; height: 50vh;
    top: 50vh; left: 50vw;
    margin-top: -25vh; margin-left: -25vw;  
}

＆＃13;

<div class="modal-box"></div>

＆＃13;

＆＃13;

＆＃13;